@kjaniec-dev/ui 0.6.0 → 0.7.1

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React17 = require('react');
+var React18 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
 
 // src/lib/cn.ts
 function cn(...inputs) {
@@ -60,7 +60,7 @@ var buttonVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "primary", size: "md" }
   }
 );
-var Button = React17__namespace.forwardRef(
+var Button = React18__namespace.forwardRef(
   ({ className, variant, size, loading, leadingIcon, trailingIcon, children, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -107,7 +107,7 @@ var badgeVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "neutral" }
   }
 );
-var Badge = React17__namespace.forwardRef(
+var Badge = React18__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
@@ -134,7 +134,7 @@ var iconColor = {
   warning: "text-warning",
   danger: "text-danger"
 };
-var Alert = React17__namespace.forwardRef(
+var Alert = React18__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: [
@@ -144,7 +144,7 @@ var Alert = React17__namespace.forwardRef(
   ] })
 );
 Alert.displayName = "Alert";
-var Spinner = React17__namespace.forwardRef(
+var Spinner = React18__namespace.forwardRef(
   ({ className, size = 24, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -161,7 +161,7 @@ var Spinner = React17__namespace.forwardRef(
   )
 );
 Spinner.displayName = "Spinner";
-var Progress = React17__namespace.forwardRef(
+var Progress = React18__namespace.forwardRef(
   ({ className, value = 0, tone = "primary", barClassName, ...props }, ref) => {
     const pct = Math.max(0, Math.min(100, value));
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -191,8 +191,55 @@ var Progress = React17__namespace.forwardRef(
   }
 );
 Progress.displayName = "Progress";
+var Label = React18__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 = React18__namespace.forwardRef(
+  ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn("text-[0.76rem]", error ? "text-danger" : "text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+Hint.displayName = "Hint";
+var Field = React18__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props })
+);
+Field.displayName = "Field";
+var FormField = React18__namespace.forwardRef(
+  ({ className, label, hint, error, required, children, ...props }, ref) => {
+    const id = React18__namespace.useId();
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const child = React18__namespace.Children.only(children);
+    const clonedChild = React18__namespace.cloneElement(child, {
+      id: child.props.id ?? id,
+      "aria-describedby": cn(
+        hint && hintId,
+        error && errorId,
+        child.props["aria-describedby"]
+      ) || void 0,
+      "aria-invalid": error ? "true" : void 0,
+      required: child.props.required ?? required
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1.5 w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, required, children: label }),
+      clonedChild,
+      hint && !error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: hintId, children: hint }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: errorId, error: true, children: error })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
 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 = React17__namespace.forwardRef(
+var Input = React18__namespace.forwardRef(
   ({ className, error, leadingIcon, style, ...props }, ref) => {
     const field = /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -217,7 +264,7 @@ var Input = React17__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React17__namespace.forwardRef(
+var Textarea = React18__namespace.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -234,30 +281,14 @@ var Textarea = React17__namespace.forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-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 = React17__namespace.forwardRef(
-  ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ref,
-      className: cn("text-[0.76rem]", error ? "text-danger" : "text-muted-foreground", className),
-      ...props
-    }
-  )
-);
-Hint.displayName = "Hint";
-var Field = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props })
+var TextField = React18__namespace.forwardRef(
+  ({ label, hint, error, required, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsxRuntime.jsx(Input, { ref, error: !!error, ...props }) });
+  }
 );
-Field.displayName = "Field";
+TextField.displayName = "TextField";
 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 = React17__namespace.forwardRef(
+var Select = React18__namespace.forwardRef(
   ({ className, error, style, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "select",
     {
@@ -285,9 +316,15 @@ var Select = React17__namespace.forwardRef(
   )
 );
 Select.displayName = "Select";
-var Checkbox = React17__namespace.forwardRef(
+var SelectField = React18__namespace.forwardRef(
+  ({ label, hint, error, required, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsxRuntime.jsx(Select, { ref, error: !!error, ...props, children }) });
+  }
+);
+SelectField.displayName = "SelectField";
+var Checkbox = React18__namespace.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React17__namespace.useId();
+    const autoId = React18__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 }),
@@ -297,9 +334,9 @@ var Checkbox = React17__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var Radio = React17__namespace.forwardRef(
+var Radio = React18__namespace.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React17__namespace.useId();
+    const autoId = React18__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 }),
@@ -309,9 +346,32 @@ var Radio = React17__namespace.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React17__namespace.forwardRef(
+var CheckboxField = React18__namespace.forwardRef(
+  ({ label, hint, error, className, ...props }, ref) => {
+    const id = React18__namespace.useId();
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1 w-full", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          ref,
+          id,
+          label,
+          "aria-describedby": cn(hint && hintId, error && errorId) || void 0,
+          "aria-invalid": error ? "true" : void 0,
+          ...props
+        }
+      ),
+      hint && !error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: hintId, className: "pl-[1.8rem]", children: hint }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: errorId, error: true, className: "pl-[1.8rem]", children: error })
+    ] });
+  }
+);
+CheckboxField.displayName = "CheckboxField";
+var Switch = React18__namespace.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React17__namespace.useId();
+    const autoId = React18__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 }),
@@ -321,7 +381,7 @@ var Switch = React17__namespace.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var Slider = React17__namespace.forwardRef(
+var Slider = React18__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -374,7 +434,7 @@ function Segmented({
     }
   );
 }
-var Card = React17__namespace.forwardRef(
+var Card = React18__namespace.forwardRef(
   ({ as: Tag = "div", className, elevated, interactive, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     Tag,
     {
@@ -390,23 +450,23 @@ var Card = React17__namespace.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React17__namespace.forwardRef(
+var CardHeader = React18__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 = React17__namespace.forwardRef(
+var CardTitle = React18__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 = React17__namespace.forwardRef(
+var CardDescription = React18__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 = React17__namespace.forwardRef(
+var CardContent = React18__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 = React17__namespace.forwardRef(
+var CardFooter = React18__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -417,7 +477,7 @@ var CardFooter = React17__namespace.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
-var Stat = React17__namespace.forwardRef(
+var Stat = React18__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 }),
@@ -457,7 +517,7 @@ var avatarVariants = classVarianceAuthority.cva(
     defaultVariants: { size: "md", tone: "secondary" }
   }
 );
-var Avatar = React17__namespace.forwardRef(
+var Avatar = React18__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;
@@ -468,20 +528,20 @@ var Avatar = React17__namespace.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React17__namespace.forwardRef(
+var AvatarGroup = React18__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 = React17__namespace.createContext(null);
+var TabsContext = React18__namespace.createContext(null);
 function useTabs() {
-  const ctx = React17__namespace.useContext(TabsContext);
+  const ctx = React18__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] = React17__namespace.useState(defaultValue ?? "");
+  const [internal, setInternal] = React18__namespace.useState(defaultValue ?? "");
   const current = value ?? internal;
-  const setValue = React17__namespace.useCallback(
+  const setValue = React18__namespace.useCallback(
     (v) => {
       if (value === void 0) setInternal(v);
       onValueChange?.(v);
@@ -490,7 +550,7 @@ 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 = React17__namespace.forwardRef(
+var TabsList = React18__namespace.forwardRef(
   ({ className, onKeyDown, ...props }, ref) => {
     const handleKeyDown = (e) => {
       const container = e.currentTarget;
@@ -527,14 +587,17 @@ var TabsList = React17__namespace.forwardRef(
         ref,
         role: "tablist",
         onKeyDown: handleKeyDown,
-        className: cn("flex gap-1 border-b border-border", className),
+        className: cn(
+          "flex gap-1 border-b border-border overflow-x-auto whitespace-nowrap [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          className
+        ),
         ...props
       }
     );
   }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React17__namespace.forwardRef(
+var TabsTrigger = React18__namespace.forwardRef(
   ({ className, value, children, ...props }, ref) => {
     const { value: current, setValue } = useTabs();
     const active = current === value;
@@ -550,7 +613,7 @@ var TabsTrigger = React17__namespace.forwardRef(
         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 outline-none",
+          "relative px-[0.9rem] py-2.5 text-sm font-semibold cursor-pointer transition-colors duration-150 outline-none shrink-0 whitespace-nowrap",
           "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",
@@ -563,7 +626,7 @@ var TabsTrigger = React17__namespace.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React17__namespace.forwardRef(
+var TabsContent = React18__namespace.forwardRef(
   ({ className, value, ...props }, ref) => {
     const { value: current } = useTabs();
     const active = current === value;
@@ -583,10 +646,10 @@ var TabsContent = React17__namespace.forwardRef(
   }
 );
 TabsContent.displayName = "TabsContent";
-var AccordionContext = React17__namespace.createContext(null);
+var AccordionContext = React18__namespace.createContext(null);
 function Accordion({ type = "single", defaultValue = [], className, children, ...props }) {
-  const [open, setOpen] = React17__namespace.useState(defaultValue);
-  const toggle = React17__namespace.useCallback(
+  const [open, setOpen] = React18__namespace.useState(defaultValue);
+  const toggle = React18__namespace.useCallback(
     (v) => {
       setOpen((prev) => {
         const isOpen = prev.includes(v);
@@ -598,15 +661,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 = React17__namespace.createContext("");
-var AccordionItem = React17__namespace.forwardRef(
+var ItemContext = React18__namespace.createContext("");
+var AccordionItem = React18__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 = React17__namespace.forwardRef(
+var AccordionTrigger = React18__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React17__namespace.useContext(AccordionContext);
-    const value = React17__namespace.useContext(ItemContext);
+    const ctx = React18__namespace.useContext(AccordionContext);
+    const value = React18__namespace.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -643,10 +706,10 @@ var AccordionTrigger = React17__namespace.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React17__namespace.forwardRef(
+var AccordionContent = React18__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React17__namespace.useContext(AccordionContext);
-    const value = React17__namespace.useContext(ItemContext);
+    const ctx = React18__namespace.useContext(AccordionContext);
+    const value = React18__namespace.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -660,11 +723,11 @@ var AccordionContent = React17__namespace.forwardRef(
   }
 );
 AccordionContent.displayName = "AccordionContent";
-var MenuContext = React17__namespace.createContext(null);
+var MenuContext = React18__namespace.createContext(null);
 function DropdownMenu({ children, className }) {
-  const [open, setOpen] = React17__namespace.useState(false);
-  const ref = React17__namespace.useRef(null);
-  React17__namespace.useEffect(() => {
+  const [open, setOpen] = React18__namespace.useState(false);
+  const ref = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -679,11 +742,11 @@ 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 = React17__namespace.forwardRef(({ onClick, asChild, ...props }, ref) => {
-  const ctx = React17__namespace.useContext(MenuContext);
+var DropdownMenuTrigger = React18__namespace.forwardRef(({ onClick, asChild, ...props }, ref) => {
+  const ctx = React18__namespace.useContext(MenuContext);
   if (asChild) {
-    const child = React17__namespace.Children.only(props.children);
-    return React17__namespace.cloneElement(child, {
+    const child = React18__namespace.Children.only(props.children);
+    return React18__namespace.cloneElement(child, {
       ref,
       ...props,
       ...child.props,
@@ -713,9 +776,9 @@ var DropdownMenuTrigger = React17__namespace.forwardRef(({ onClick, asChild, ...
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 function DropdownMenuContent({ className, align = "start", children, ...props }) {
-  const ctx = React17__namespace.useContext(MenuContext);
-  const ref = React17__namespace.useRef(null);
-  React17__namespace.useEffect(() => {
+  const ctx = React18__namespace.useContext(MenuContext);
+  const ref = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
     if (!ctx.open) return;
     const container = ref.current;
     if (container) {
@@ -762,9 +825,9 @@ function DropdownMenuContent({ className, align = "start", children, ...props })
     }
   );
 }
-var DropdownMenuItem = React17__namespace.forwardRef(
+var DropdownMenuItem = React18__namespace.forwardRef(
   ({ className, danger, icon, children, onClick, ...props }, ref) => {
-    const ctx = React17__namespace.useContext(MenuContext);
+    const ctx = React18__namespace.useContext(MenuContext);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -794,11 +857,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 = React17__namespace.forwardRef(
+var Breadcrumb = React18__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 = React17__namespace.forwardRef(
+var BreadcrumbItem = React18__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 });
@@ -845,27 +908,99 @@ 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 = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props })
+var BottomNavigation = React18__namespace.forwardRef(
+  ({ className, items, showLabels = "always", fixed = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        ref,
+        className: cn(
+          "bg-surface/90 border-t border-border flex items-center justify-around px-4 pt-2 pb-[calc(0.75rem+env(safe-area-inset-bottom,0))] shadow-kj-lg",
+          fixed ? "fixed bottom-0 left-0 right-0 z-40 backdrop-blur-md" : "relative w-full",
+          className
+        ),
+        ...props,
+        children: items.map((item) => {
+          const isActive = item.active;
+          const showLabel = showLabels !== "never" && (showLabels === "always" || isActive);
+          const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-center justify-center gap-1 w-full relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: cn(
+                  "relative flex items-center justify-center p-1 rounded-full transition-all duration-200",
+                  isActive ? "text-primary scale-110" : "text-muted-foreground group-hover:text-foreground group-active:scale-95"
+                ),
+                children: [
+                  item.icon,
+                  item.badge !== void 0 && item.badge !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1.5 min-w-[16px] h-[16px] px-1 rounded-full bg-primary text-primary-foreground text-[9px] font-bold flex items-center justify-center ring-2 ring-surface", children: item.badge })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[10px] font-semibold tracking-wide transition-all duration-200 select-none",
+                  showLabel ? "opacity-100 scale-100 h-auto" : "opacity-0 scale-75 h-0 overflow-hidden",
+                  isActive ? "text-primary font-bold" : "text-muted-foreground group-hover:text-foreground"
+                ),
+                children: item.label
+              }
+            ),
+            isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -bottom-1.5 w-1 h-1 rounded-full bg-primary animate-fade-in" })
+          ] });
+          const itemClass = "group flex-1 flex flex-col items-center justify-center py-1 cursor-pointer transition-all duration-150 relative focus:outline-none";
+          if (item.href) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: item.href,
+                className: itemClass,
+                "aria-current": isActive ? "page" : void 0,
+                children: content
+              },
+              item.id
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              className: itemClass,
+              "aria-pressed": isActive,
+              children: content
+            },
+            item.id
+          );
+        })
+      }
+    );
+  }
+);
+BottomNavigation.displayName = "BottomNavigation";
+var TableWrap = React18__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-x-auto w-full", className), ...props })
 );
 TableWrap.displayName = "TableWrap";
-var Table = React17__namespace.forwardRef(
+var Table = React18__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 = React17__namespace.forwardRef(
+var TableHeader = React18__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className, ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React17__namespace.forwardRef(
+var TableBody = React18__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className, ...props })
 );
 TableBody.displayName = "TableBody";
-var TableRow = React17__namespace.forwardRef(
+var TableRow = React18__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 = React17__namespace.forwardRef(
+var TableHead = React18__namespace.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -880,7 +1015,7 @@ var TableHead = React17__namespace.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React17__namespace.forwardRef(
+var TableCell = React18__namespace.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
@@ -913,13 +1048,13 @@ function Tooltip({ content, children, className }) {
     )
   ] });
 }
-var ModalContext = React17__namespace.createContext(null);
+var ModalContext = React18__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(() => {
+  const titleId = React18__namespace.useId();
+  const descId = React18__namespace.useId();
+  const containerRef = React18__namespace.useRef(null);
+  const lastActiveElement = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
     if (!open) {
       if (lastActiveElement.current) {
         lastActiveElement.current.focus();
@@ -1021,19 +1156,19 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
   );
 }
 function ModalTitle({ className, id, ...props }) {
-  const ctx = React17__namespace.useContext(ModalContext);
+  const ctx = React18__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, id, ...props }) {
-  const ctx = React17__namespace.useContext(ModalContext);
+  const ctx = React18__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 = React17__namespace.createContext(null);
+var ToastContext = React18__namespace.createContext(null);
 function useToast() {
-  const ctx = React17__namespace.useContext(ToastContext);
+  const ctx = React18__namespace.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
   return ctx;
 }
@@ -1054,13 +1189,13 @@ var toneBorder = {
   danger: "border-l-danger"
 };
 function ToastProvider({ children }) {
-  const [items, setItems] = React17__namespace.useState([]);
-  const idRef = React17__namespace.useRef(0);
-  const remove = React17__namespace.useCallback((id) => {
+  const [items, setItems] = React18__namespace.useState([]);
+  const idRef = React18__namespace.useRef(0);
+  const remove = React18__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 = React17__namespace.useCallback(
+  const toast = React18__namespace.useCallback(
     ({ message, tone = "default", duration = 3200 }) => {
       const id = ++idRef.current;
       setItems((prev) => [...prev, { id, message, tone, duration }]);
@@ -1090,7 +1225,7 @@ function ToastProvider({ children }) {
     )) })
   ] });
 }
-var PageHeader = React17__namespace.forwardRef(
+var PageHeader = React18__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 }),
@@ -1101,7 +1236,7 @@ var PageHeader = React17__namespace.forwardRef(
   ] }) })
 );
 PageHeader.displayName = "PageHeader";
-var EmptyState = React17__namespace.forwardRef(
+var EmptyState = React18__namespace.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1121,7 +1256,7 @@ var EmptyState = React17__namespace.forwardRef(
   )
 );
 EmptyState.displayName = "EmptyState";
-var MetricCard = React17__namespace.forwardRef(
+var MetricCard = React18__namespace.forwardRef(
   ({ className, title, value, trend, trendDirection = "neutral", description, icon, ...props }, ref) => {
     const trendColor = {
       up: "text-success bg-success-surface border-success/20",
@@ -1151,54 +1286,171 @@ function DataTable({
   emptyTitle = "No data available",
   emptyDescription = "There are no records to display at this time.",
   emptyAction,
+  getRowKey,
+  onRowClick,
+  toolbar,
+  pagination,
+  selectedRows,
+  onSelectionChange,
+  sortBy,
+  sortDirection,
+  onSort,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(TableWrap, { className: cn("relative overflow-hidden", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col, idx) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: col.className, children: col.header }, idx)) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: loading && data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "h-64 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading dataset..." })
-      ] }) }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "danger", title: "Error loading data", children: error }) }) }) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-        EmptyState,
-        {
-          title: emptyTitle,
-          description: emptyDescription,
-          action: emptyAction,
-          className: "border-none bg-transparent rounded-none py-16"
-        }
-      ) }) }) : data.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: col.className, children: col.accessor(row) }, colIdx)) }, rowIdx)) })
+  const getRowId = React18__namespace.useCallback(
+    (row, index) => getRowKey ? getRowKey(row, index) : index,
+    [getRowKey]
+  );
+  const isSelectionActive = selectedRows !== void 0 && onSelectionChange !== void 0;
+  const allSelected = React18__namespace.useMemo(() => {
+    if (!isSelectionActive || data.length === 0) return false;
+    return data.every((row, idx) => selectedRows.has(getRowId(row, idx)));
+  }, [isSelectionActive, data, selectedRows, getRowId]);
+  const someSelected = React18__namespace.useMemo(() => {
+    if (!isSelectionActive || data.length === 0) return false;
+    const selectedCount = data.filter((row, idx) => selectedRows.has(getRowId(row, idx))).length;
+    return selectedCount > 0 && selectedCount < data.length;
+  }, [isSelectionActive, data, selectedRows, getRowId]);
+  const headerCheckboxRef = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
+    if (headerCheckboxRef.current) {
+      headerCheckboxRef.current.indeterminate = someSelected;
+    }
+  }, [someSelected]);
+  const handleSelectAll = (e) => {
+    if (!onSelectionChange) return;
+    const checked = e.target.checked;
+    const next = new Set(selectedRows);
+    data.forEach((row, idx) => {
+      const id = getRowId(row, idx);
+      if (checked) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
+    });
+    onSelectionChange(next);
+  };
+  const handleSelectRow = (row, idx, checked) => {
+    if (!onSelectionChange || !selectedRows) return;
+    const id = getRowId(row, idx);
+    const next = new Set(selectedRows);
+    if (checked) {
+      next.add(id);
+    } else {
+      next.delete(id);
+    }
+    onSelectionChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4 w-full", className), children: [
+    toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3", children: toolbar }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TableWrap, { className: "relative overflow-hidden", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+          isSelectionActive && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-12 px-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              ref: headerCheckboxRef,
+              checked: allSelected,
+              onChange: handleSelectAll,
+              "aria-label": "Select all rows",
+              className: "h-4 w-4 rounded border-input text-primary focus:ring-ring"
+            }
+          ) }) }),
+          columns.map((col, idx) => {
+            const alignClass = {
+              left: "text-left",
+              center: "text-center",
+              right: "text-right"
+            }[col.align || "left"];
+            const isSortable = col.sortable && onSort && col.sortKey;
+            const isSortedActive = sortBy && col.sortKey === sortBy;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableHead,
+              {
+                className: cn(
+                  alignClass,
+                  isSortable && "cursor-pointer select-none hover:bg-muted/30 transition-colors",
+                  col.className
+                ),
+                onClick: () => {
+                  if (!isSortable || !col.sortKey) return;
+                  const nextDirection = isSortedActive && sortDirection === "asc" ? "desc" : "asc";
+                  onSort(col.sortKey, nextDirection);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center gap-1.5", alignClass === "text-right" && "justify-end w-full"), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.header }),
+                  isSortable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground shrink-0 select-none", children: isSortedActive ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u21C5" })
+                ] })
+              },
+              idx
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: loading && data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "h-64 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading dataset..." })
+        ] }) }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "danger", title: "Error loading data", children: error }) }) }) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length + (isSelectionActive ? 1 : 0), className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          EmptyState,
+          {
+            title: emptyTitle,
+            description: emptyDescription,
+            action: emptyAction,
+            className: "border-none bg-transparent rounded-none py-16"
+          }
+        ) }) }) : data.map((row, rowIdx) => {
+          const rowKey = getRowId(row, rowIdx);
+          const isSelected = isSelectionActive && selectedRows.has(rowKey);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              onClick: () => onRowClick && onRowClick(row),
+              className: cn(
+                onRowClick && "cursor-pointer hover:bg-muted/40 transition-colors",
+                isSelected && "bg-primary/5 hover:bg-primary/10"
+              ),
+              children: [
+                isSelectionActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  TableCell,
+                  {
+                    className: "w-12 px-4 text-center",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: isSelected,
+                        onChange: (e) => handleSelectRow(row, rowIdx, e.target.checked),
+                        "aria-label": `Select row ${rowIdx + 1}`,
+                        className: "h-4 w-4 rounded border-input text-primary focus:ring-ring"
+                      }
+                    ) })
+                  }
+                ),
+                columns.map((col, colIdx) => {
+                  const alignClass = {
+                    left: "text-left",
+                    center: "text-center",
+                    right: "text-right"
+                  }[col.align || "left"];
+                  return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn(alignClass, col.className), children: col.accessor(row) }, colIdx);
+                })
+              ]
+            },
+            rowKey
+          );
+        }) })
+      ] }),
+      loading && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] grid place-items-center z-10 transition-opacity duration-150", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 36 }) })
     ] }),
-    loading && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] grid place-items-center z-10 transition-opacity duration-150", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 36 }) })
+    pagination && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end w-full", children: pagination })
   ] });
 }
 DataTable.displayName = "DataTable";
-var FormField = React17__namespace.forwardRef(
-  ({ className, label, hint, error, required, children, ...props }, ref) => {
-    const id = React17__namespace.useId();
-    const hintId = `${id}-hint`;
-    const errorId = `${id}-error`;
-    const child = React17__namespace.Children.only(children);
-    const clonedChild = React17__namespace.cloneElement(child, {
-      id: child.props.id ?? id,
-      "aria-describedby": cn(
-        hint && hintId,
-        error && errorId,
-        child.props["aria-describedby"]
-      ) || void 0,
-      "aria-invalid": error ? "true" : void 0,
-      required: child.props.required ?? required
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1.5 w-full", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, required, children: label }),
-      clonedChild,
-      hint && !error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: hintId, children: hint }),
-      error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: errorId, error: true, children: error })
-    ] });
-  }
-);
-FormField.displayName = "FormField";
-var ErrorState = React17__namespace.forwardRef(
+var ErrorState = React18__namespace.forwardRef(
   ({ className, title = "Wyst\u0105pi\u0142 b\u0142\u0105d", message, onRetry, retryLabel = "Spr\xF3buj ponownie", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1218,7 +1470,7 @@ var ErrorState = React17__namespace.forwardRef(
   )
 );
 ErrorState.displayName = "ErrorState";
-var Skeleton = React17__namespace.forwardRef(
+var Skeleton = React18__namespace.forwardRef(
   ({ className, variant = "rectangular", width, height, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1240,27 +1492,549 @@ var Skeleton = React17__namespace.forwardRef(
   )
 );
 Skeleton.displayName = "Skeleton";
-var DashboardShell = React17__namespace.forwardRef(
-  ({ className, sidebar, topbar, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DashboardShell = React18__namespace.forwardRef(
+  ({
+    className,
+    sidebar,
+    topbar,
+    children,
+    sidebarWidth = "md:w-64",
+    contentWidth = "default",
+    stickyTopbar = true,
+    mobileSidebar,
+    ...props
+  }, ref) => {
+    const [mobileOpen, setMobileOpen] = React18__namespace.useState(false);
+    const contentWidthClass = {
+      default: "max-w-7xl w-full mx-auto",
+      wide: "max-w-screen-2xl w-full mx-auto",
+      full: "max-w-none w-full"
+    }[contentWidth];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "min-h-screen bg-canvas text-foreground flex flex-col md:flex-row",
+          className
+        ),
+        ...props,
+        children: [
+          sidebar && /* @__PURE__ */ jsxRuntime.jsx(
+            "aside",
+            {
+              className: cn(
+                "border-r border-border bg-surface shrink-0 z-20",
+                mobileSidebar ? "hidden md:flex" : "w-full md:flex",
+                sidebarWidth
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 w-full flex flex-col", mobileSidebar ? "h-screen" : "h-auto md:h-screen"), children: sidebar })
+            }
+          ),
+          mobileSidebar && mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: () => setMobileOpen(false),
+              className: "fixed inset-0 z-50 md:hidden bg-[color-mix(in_oklch,#09090b_45%,transparent)] backdrop-blur-[2px] transition-opacity duration-300",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "aside",
+                {
+                  onClick: (e) => e.stopPropagation(),
+                  className: "w-72 h-full bg-surface border-r border-border flex flex-col shadow-kj-lg",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-border", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Navigation" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setMobileOpen(false),
+                          className: "p-1 rounded 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" }) })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: mobileSidebar })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+            topbar && /* @__PURE__ */ jsxRuntime.jsxs(
+              "header",
+              {
+                className: cn(
+                  "h-14 border-b border-border bg-surface flex items-center px-6 z-10 shrink-0 gap-4",
+                  stickyTopbar && "sticky top-0"
+                ),
+                children: [
+                  mobileSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setMobileOpen(true),
+                      className: "md:hidden p-1.5 -ml-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
+                      "aria-label": "Open navigation",
+                      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                      ] })
+                    }
+                  ),
+                  topbar
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn("flex-1 p-6 md:p-8", contentWidthClass), children })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DashboardShell.displayName = "DashboardShell";
+var SettingsLayout = React18__namespace.forwardRef(
+  ({ className, sidebar, children, title, description, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-6 w-full", className), ...props, children: [
+      (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border pb-4", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight text-foreground", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "lg:w-1/4 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-row lg:flex-col gap-1 overflow-x-auto lg:overflow-x-visible pb-2 lg:pb-0", children: sidebar }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-3xl", children })
+      ] })
+    ] });
+  }
+);
+SettingsLayout.displayName = "SettingsLayout";
+var DetailPageLayout = React18__namespace.forwardRef(
+  ({ className, title, description, backHref, backLabel = "Back", onBackClick, actions, aside, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-6 w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+        (backHref || onBackClick) && /* @__PURE__ */ jsxRuntime.jsx("div", { children: backHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: backHref,
+            className: cn(
+              buttonVariants({ variant: "ghost", size: "sm" }),
+              "-ml-3 h-8 text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) }),
+              backLabel
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "-ml-3 h-8 text-muted-foreground hover:text-foreground",
+            onClick: onBackClick,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-4 w-4 mr-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) }),
+              backLabel
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight text-foreground", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8 items-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", aside ? "lg:col-span-2" : "lg:col-span-3"), children }),
+        aside && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "space-y-6 lg:col-span-1 bg-surface border border-border rounded-kj-xl p-6 shadow-kj-xs", children: aside })
+      ] })
+    ] });
+  }
+);
+DetailPageLayout.displayName = "DetailPageLayout";
+var TableToolbar = React18__namespace.forwardRef(
+  ({ className, searchQuery, onSearchChange, searchPlaceholder = "Search...", actions, filters, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 w-full pb-1",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col sm:flex-row items-stretch sm:items-center gap-2 max-w-xl", children: [
+            onSearchChange && /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                type: "search",
+                placeholder: searchPlaceholder,
+                value: searchQuery,
+                onChange: (e) => onSearchChange(e.target.value),
+                className: "sm:w-64",
+                leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) })
+              }
+            ),
+            filters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: filters })
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0 justify-end", children: actions })
+        ]
+      }
+    );
+  }
+);
+TableToolbar.displayName = "TableToolbar";
+function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  tone = "primary",
+  loading = false
+}) {
+  const toneButtonVariant = {
+    danger: "danger",
+    primary: "primary",
+    success: "secondary"
+    // standard secondary in our system is teal (success-aligned)
+  }[tone];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onClose, width: 400, showClose: !loading, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ModalActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: onClose, disabled: loading, children: cancelLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: toneButtonVariant, onClick: onConfirm, loading, children: confirmLabel })
+    ] })
+  ] });
+}
+ConfirmDialog.displayName = "ConfirmDialog";
+function Drawer({
+  open,
+  onClose,
+  children,
+  title,
+  description,
+  width = "max-w-md",
+  side = "right"
+}) {
+  const containerRef = React18__namespace.useRef(null);
+  const lastActiveElement = React18__namespace.useRef(null);
+  React18__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", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+  const sideClasses = {
+    right: cn(
+      "right-0 h-full border-l",
+      open ? "translate-x-0" : "translate-x-full"
+    ),
+    left: cn(
+      "left-0 h-full border-r",
+      open ? "translate-x-0" : "-translate-x-full"
+    )
+  }[side];
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      onClick: (e) => e.target === e.currentTarget && onClose(),
       className: cn(
-        "min-h-screen bg-canvas text-foreground flex flex-col md:flex-row",
-        className
+        "fixed inset-0 z-[100] transition-opacity duration-300 backdrop-blur-[2px]",
+        "bg-[color-mix(in_oklch,#09090b_45%,transparent)]",
+        open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
       ),
-      ...props,
-      children: [
-        sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "w-full md:w-64 border-r border-border bg-surface shrink-0 z-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 h-auto md:h-screen flex flex-col", children: sidebar }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
-          topbar && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 h-14 border-b border-border bg-surface flex items-center px-6 z-10 shrink-0", children: topbar }),
-          /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-6 md:p-8 max-w-7xl w-full mx-auto", children })
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": !title ? "Drawer" : void 0,
+          "aria-labelledby": title ? "drawer-title" : void 0,
+          "aria-describedby": description ? "drawer-description" : void 0,
+          tabIndex: -1,
+          className: cn(
+            "fixed top-0 bottom-0 bg-surface border-border flex flex-col w-full shadow-kj-lg transition-transform duration-300 ease-spring outline-none",
+            width,
+            sideClasses
+          ),
+          children: [
+            (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-6 border-b border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "drawer-title", className: "text-lg font-bold tracking-tight text-foreground", children: title }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "drawer-description", className: "text-xs text-muted-foreground", children: description })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  className: "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" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-6", children })
+          ]
+        }
+      )
     }
-  )
-);
-DashboardShell.displayName = "DashboardShell";
+  );
+}
+Drawer.displayName = "Drawer";
+function CommandPalette({ open, onClose, items, placeholder = "Type a command or search..." }) {
+  const [search, setSearch] = React18__namespace.useState("");
+  const [activeIndex, setActiveIndex] = React18__namespace.useState(0);
+  const containerRef = React18__namespace.useRef(null);
+  const listRef = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
+    if (open) {
+      setSearch("");
+      setActiveIndex(0);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }, [open]);
+  const filteredItems = React18__namespace.useMemo(() => {
+    if (!search) return items;
+    const cleanSearch = search.toLowerCase();
+    return items.filter(
+      (item) => item.title.toLowerCase().includes(cleanSearch) || item.subtitle?.toLowerCase().includes(cleanSearch) || item.category?.toLowerCase().includes(cleanSearch)
+    );
+  }, [search, items]);
+  React18__namespace.useEffect(() => {
+    setActiveIndex(0);
+  }, [filteredItems]);
+  React18__namespace.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => filteredItems.length === 0 ? 0 : (prev + 1) % filteredItems.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => filteredItems.length === 0 ? 0 : (prev - 1 + filteredItems.length) % filteredItems.length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (filteredItems[activeIndex]) {
+          filteredItems[activeIndex].action();
+          onClose();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, filteredItems, activeIndex, onClose]);
+  React18__namespace.useEffect(() => {
+    if (listRef.current) {
+      const activeEl = listRef.current.children[activeIndex];
+      if (activeEl) {
+        activeEl.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [activeIndex]);
+  if (!open) return null;
+  const groups = {};
+  filteredItems.forEach((item) => {
+    const cat = item.category || "General";
+    if (!groups[cat]) groups[cat] = [];
+    groups[cat].push(item);
+  });
+  let absoluteItemIndex = 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: (e) => e.target === e.currentTarget && onClose(),
+      className: "fixed inset-0 z-[100] grid place-items-start justify-center p-6 md:p-24 backdrop-blur-[3px] bg-[color-mix(in_oklch,#09090b_60%,transparent)]",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: "w-[95vw] max-w-lg bg-surface border border-border rounded-kj-xl shadow-kj-lg flex flex-col overflow-hidden max-h-[500px]",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-border flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "h-5 w-5 text-muted-foreground shrink-0 ml-1", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder,
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  className: "flex-1 font-sans text-[0.95rem] bg-transparent text-foreground placeholder:text-muted-foreground outline-none border-none focus:ring-0",
+                  autoFocus: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-2 min-h-[150px]", children: filteredItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-12 text-center text-sm text-muted-foreground", children: [
+              'No results found for "',
+              search,
+              '"'
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, className: "space-y-4", children: Object.entries(groups).map(([cat, itemsInCat]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1 text-[0.65rem] font-bold uppercase tracking-wider text-muted-foreground", children: cat }),
+              itemsInCat.map((item) => {
+                const currentIdx = absoluteItemIndex++;
+                const isActive = currentIdx === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    onClick: () => {
+                      item.action();
+                      onClose();
+                    },
+                    className: cn(
+                      "flex items-center justify-between gap-3 px-3 py-2.5 rounded-kj-md cursor-pointer select-none transition-colors",
+                      isActive ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                        item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground [&_svg]:h-[1.1rem] [&_svg]:w-[1.1rem]", children: item.icon }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[0.85rem] font-semibold", isActive ? "text-primary" : "text-foreground"), children: item.title }),
+                          item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.75rem] text-muted-foreground truncate", children: item.subtitle })
+                        ] })
+                      ] }),
+                      item.shortcut && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: item.shortcut.map((sc, scIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                        "kbd",
+                        {
+                          className: "px-1.5 py-0.5 rounded border border-border bg-subtle text-[10px] font-mono leading-none shadow-kj-xs text-muted-foreground",
+                          children: sc
+                        },
+                        scIdx
+                      )) })
+                    ]
+                  },
+                  item.id
+                );
+              })
+            ] }, cat)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2.5 border-t border-border bg-subtle flex items-center justify-between text-[11px] text-muted-foreground font-medium", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "font-mono text-[9px] px-1 border rounded bg-surface", children: "\u2191\u2193" }),
+                  " Navigate"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "font-mono text-[9px] px-1 border rounded bg-surface", children: "Enter" }),
+                  " Select"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "font-mono text-[9px] px-1 border rounded bg-surface", children: "Esc" }),
+                " Close"
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+CommandPalette.displayName = "CommandPalette";
+function SidebarNav({ className, groups, currentHref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6 py-4 px-3 w-full", className), ...props, children: groups.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+    group.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "px-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/85", children: group.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: group.items.map((item) => {
+      const isActive = item.active || item.href && currentHref && currentHref === item.href;
+      const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5 min-w-0", children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+            "[&_svg]:h-[1.1rem] [&_svg]:w-[1.1rem] shrink-0",
+            isActive ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
+          ), children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+        ] }),
+        item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center justify-center", children: item.badge })
+      ] });
+      const itemClass = cn(
+        "group flex items-center justify-between gap-3 px-3 py-2 rounded-kj-md text-[0.85rem] font-semibold select-none cursor-pointer transition-all duration-150",
+        isActive ? "bg-primary/10 text-primary border-l-2 border-primary rounded-l-none pl-2.5" : "text-muted-foreground hover:bg-muted hover:text-foreground border-l-2 border-transparent"
+      );
+      if (item.href) {
+        return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: itemClass, children: content }, item.id);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: item.onClick,
+          className: itemClass,
+          children: content
+        },
+        item.id
+      );
+    }) })
+  ] }, groupIdx)) });
+}
+SidebarNav.displayName = "SidebarNav";
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -1270,6 +2044,7 @@ exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
+exports.BottomNavigation = BottomNavigation;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
@@ -1281,8 +2056,13 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.CheckboxField = CheckboxField;
+exports.CommandPalette = CommandPalette;
+exports.ConfirmDialog = ConfirmDialog;
 exports.DashboardShell = DashboardShell;
 exports.DataTable = DataTable;
+exports.DetailPageLayout = DetailPageLayout;
+exports.Drawer = Drawer;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
 exports.DropdownMenuItem = DropdownMenuItem;
@@ -1306,6 +2086,9 @@ exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Segmented = Segmented;
 exports.Select = Select;
+exports.SelectField = SelectField;
+exports.SettingsLayout = SettingsLayout;
+exports.SidebarNav = SidebarNav;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
@@ -1317,11 +2100,13 @@ exports.TableCell = TableCell;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
+exports.TableToolbar = TableToolbar;
 exports.TableWrap = TableWrap;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
+exports.TextField = TextField;
 exports.Textarea = Textarea;
 exports.ToastProvider = ToastProvider;
 exports.Tooltip = Tooltip;