najm-kit 0.0.7 → 0.0.8

package/dist/index.mjs

@@ -1,14 +1,15 @@
-import * as React32 from 'react';
-import React32__default, { createContext, useContext, useCallback, useEffect, useState, useRef, useMemo, useLayoutEffect } from 'react';
+import * as React38 from 'react';
+import React38__default, { createContext, useContext, useCallback, useEffect, useState, useRef, useLayoutEffect, useMemo } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
-import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, UploadCloud, CheckCircle2, AlertCircle, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, Star, Globe, Clock, Search, Upload, Plus, ChevronsLeft, ChevronLeft, ChevronsRight, MoreVertical, Edit, Merge, PanelLeftOpen, PanelLeftClose, Menu, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, List, Settings, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, UploadCloud, CheckCircle2, AlertCircle, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, Star, Globe, Clock, Search, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, Menu, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { create } from 'zustand';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -30,6 +31,7 @@ import { FormProvider, Controller, useFormContext, useForm, useFieldArray } from
 import { defaultStyles, FileIcon } from 'react-file-icon';
 import { format } from 'date-fns';
 import { PhoneInput as PhoneInput$1, defaultCountries } from 'react-international-phone';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { getExpandedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, useReactTable, flexRender } from '@tanstack/react-table';
 
@@ -122,9 +124,20 @@ var accents = {
 };
 
 // src/theme/presets/compose.ts
+function lightAccentFromPrimary(primary = "") {
+  const parts = primary.trim().split(/\s+/);
+  if (parts.length < 2) return { accent: "0 0% 94%", "accent-foreground": "0 0% 30%" };
+  const [h, s] = parts;
+  return { accent: `${h} ${s} 93%`, "accent-foreground": `${h} ${s} 35%` };
+}
 function composePreset(mode, accent) {
   const base = mode === "dark" ? darkMode : lightMode;
-  return { ...base, ...accents[accent] };
+  const accentTokens = accents[accent];
+  if (mode === "light") {
+    const { accent: _a, "accent-foreground": _af, ...brandTokens } = accentTokens;
+    return { ...base, ...brandTokens, ...lightAccentFromPrimary(brandTokens.primary) };
+  }
+  return { ...base, ...accentTokens };
 }
 var PRESET_MAP = {
   light: { mode: "light", accent: "neutral" },
@@ -149,7 +162,8 @@ function tokensToStyle(tokens, accentOnly) {
   }
   return style;
 }
-var NajmThemeDepthContext = React32.createContext(0);
+var NajmThemeDepthContext = React38.createContext(0);
+var NajmThemeContainerCtx = React38.createContext(null);
 function NajmThemeProvider({
   preset,
   mode,
@@ -160,24 +174,56 @@ function NajmThemeProvider({
   asChild,
   children
 }) {
-  const depth = React32.useContext(NajmThemeDepthContext);
+  const depth = React38.useContext(NajmThemeDepthContext);
   const isRoot = depth === 0;
-  const resolved = React32.useMemo(() => {
+  const resolved = React38.useMemo(() => {
     if (tokens) return tokens;
     if (preset) return resolvePreset(preset);
     if (mode) return composePreset(mode, accent ?? "neutral");
     return resolvePreset("light");
   }, [preset, mode, accent, tokens]);
-  const style = React32.useMemo(() => tokensToStyle(resolved, accentOnly), [resolved, accentOnly]);
+  const style = React38.useMemo(() => tokensToStyle(resolved, accentOnly), [resolved, accentOnly]);
   const Comp = asChild ? Slot : "div";
-  React32.useEffect(() => {
+  const [container, setContainer] = React38.useState(null);
+  React38.useEffect(() => {
     if (!isRoot) return;
     const root = document.documentElement;
     const entries = Object.entries(style);
     entries.forEach(([k, v]) => root.style.setProperty(k, v));
     return () => entries.forEach(([k]) => root.style.removeProperty(k));
   }, [style, isRoot]);
-  return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(Comp, { "data-najm-theme": preset ?? `${mode ?? "light"}-${accent ?? "neutral"}`, className, style, children }) });
+  return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(Comp, { ref: setContainer, "data-najm-theme": preset ?? `${mode ?? "light"}-${accent ?? "neutral"}`, className, style, children }) }) });
+}
+var EDITABLE_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "search",
+  "email",
+  "password",
+  "tel",
+  "url",
+  "number",
+  "date",
+  "time",
+  "datetime-local",
+  "month",
+  "week",
+  "color"
+]);
+function isEditableTextField(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target.closest('[contenteditable="true"]')) return true;
+  if (target.getAttribute("role") === "combobox") return true;
+  if (target.closest('[role="combobox"]')) return true;
+  const tag = target.tagName;
+  if (tag === "TEXTAREA") return true;
+  if (tag === "SELECT") return true;
+  if (tag === "INPUT") {
+    const rawType = target.type;
+    const type = (rawType || "text").toLowerCase();
+    return EDITABLE_INPUT_TYPES.has(type);
+  }
+  return false;
 }
 function parseShortcut(shortcut) {
   const parts = shortcut.toLowerCase().split("+").map((s) => s.trim());
@@ -190,16 +236,14 @@ function parseShortcut(shortcut) {
   };
 }
 function useKeyboard(shortcut, handler2, options = {}) {
-  const { enabled = true, preventDefault = false, ignoreInputs = true } = options;
+  const { enabled = true, preventDefault = false, ignoreInputs = true, scopeRef } = options;
   const callback = useCallback(
     (e) => {
       if (!enabled) return;
-      if (ignoreInputs) {
-        const target = e.target;
-        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable) {
-          return;
-        }
-      }
+      const scope = scopeRef?.current;
+      if (scope && !(e.target instanceof Node)) return;
+      if (scope && e.target instanceof Node && !scope.contains(e.target)) return;
+      if (ignoreInputs && isEditableTextField(e.target)) return;
       const parsed = parseShortcut(shortcut);
       const ctrlMatch = parsed.ctrl ? e.ctrlKey || e.metaKey : true;
       const shiftMatch = parsed.shift ? e.shiftKey : true;
@@ -211,7 +255,7 @@ function useKeyboard(shortcut, handler2, options = {}) {
         handler2(e);
       }
     },
-    [shortcut, handler2, enabled, preventDefault, ignoreInputs]
+    [shortcut, handler2, enabled, preventDefault, ignoreInputs, scopeRef]
   );
   useEffect(() => {
     document.addEventListener("keydown", callback);
@@ -347,9 +391,9 @@ var NIcon = ({
     height: size,
     ...style
   };
-  if (React32__default.isValidElement(icon)) {
-    return React32__default.cloneElement(icon, {
-      className: cn(icon.props.className, className),
+  if (React38__default.isValidElement(icon)) {
+    return React38__default.cloneElement(icon, {
+      className: cn(className, icon.props.className),
       onClick,
       ...rest
     });
@@ -466,7 +510,7 @@ function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
-var Button = React32.forwardRef(
+var Button = React38.forwardRef(
   ({
     className,
     variant,
@@ -482,16 +526,17 @@ var Button = React32.forwardRef(
     loaderPosition = "left",
     leftIcon,
     rightIcon,
+    bordered = false,
     disabled,
     children,
     onClick,
     ...props
   }, ref) => {
-    const [pending, setPending] = React32.useState(false);
+    const [pending, setPending] = React38.useState(false);
     const isLoading = loading || pending;
     const isDisabled = disabled || disabledWhileLoading && isLoading;
     const Comp = asChild ? Slot : "button";
-    const handleClick = React32.useCallback(
+    const handleClick = React38.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -523,7 +568,11 @@ var Button = React32.forwardRef(
         "aria-busy": isLoading || void 0,
         "aria-disabled": asChild && isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
-        className: cn(buttonVariants({ variant, size, rounded, fullWidth, className })),
+        className: cn(
+          buttonVariants({ variant, size, rounded, fullWidth }),
+          bordered && "border border-muted-foreground",
+          className
+        ),
         onClick: handleClick,
         ...props,
         children: showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -693,6 +742,210 @@ function Badge({
   ] });
 }
 var NBadge = Badge;
+var POSITION = {
+  "top-start": "top-0 start-0 -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2",
+  "top-center": "top-0 start-1/2 -translate-x-1/2 -translate-y-1/2",
+  "top-end": "top-0 end-0 translate-x-1/2 -translate-y-1/2 rtl:-translate-x-1/2",
+  "middle-start": "top-1/2 start-0 -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2",
+  "middle-center": "top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2",
+  "middle-end": "top-1/2 end-0 translate-x-1/2 -translate-y-1/2 rtl:-translate-x-1/2",
+  "bottom-start": "bottom-0 start-0 -translate-x-1/2 translate-y-1/2 rtl:translate-x-1/2",
+  "bottom-center": "bottom-0 start-1/2 -translate-x-1/2 translate-y-1/2",
+  "bottom-end": "bottom-0 end-0 translate-x-1/2 translate-y-1/2 rtl:-translate-x-1/2"
+};
+var POSITION_SM = {
+  "top-start": "sm:top-0 sm:start-0 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rtl:translate-x-1/2",
+  "top-center": "sm:top-0 sm:start-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
+  "top-end": "sm:top-0 sm:end-0 sm:translate-x-1/2 sm:-translate-y-1/2 sm:rtl:-translate-x-1/2",
+  "middle-start": "sm:top-1/2 sm:start-0 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rtl:translate-x-1/2",
+  "middle-center": "sm:top-1/2 sm:start-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
+  "middle-end": "sm:top-1/2 sm:end-0 sm:translate-x-1/2 sm:-translate-y-1/2 sm:rtl:-translate-x-1/2",
+  "bottom-start": "sm:bottom-0 sm:start-0 sm:-translate-x-1/2 sm:translate-y-1/2 sm:rtl:translate-x-1/2",
+  "bottom-center": "sm:bottom-0 sm:start-1/2 sm:-translate-x-1/2 sm:translate-y-1/2",
+  "bottom-end": "sm:bottom-0 sm:end-0 sm:translate-x-1/2 sm:translate-y-1/2 sm:rtl:-translate-x-1/2"
+};
+var POSITION_MD = {
+  "top-start": "md:top-0 md:start-0 md:-translate-x-1/2 md:-translate-y-1/2 md:rtl:translate-x-1/2",
+  "top-center": "md:top-0 md:start-1/2 md:-translate-x-1/2 md:-translate-y-1/2",
+  "top-end": "md:top-0 md:end-0 md:translate-x-1/2 md:-translate-y-1/2 md:rtl:-translate-x-1/2",
+  "middle-start": "md:top-1/2 md:start-0 md:-translate-x-1/2 md:-translate-y-1/2 md:rtl:translate-x-1/2",
+  "middle-center": "md:top-1/2 md:start-1/2 md:-translate-x-1/2 md:-translate-y-1/2",
+  "middle-end": "md:top-1/2 md:end-0 md:translate-x-1/2 md:-translate-y-1/2 md:rtl:-translate-x-1/2",
+  "bottom-start": "md:bottom-0 md:start-0 md:-translate-x-1/2 md:translate-y-1/2 md:rtl:translate-x-1/2",
+  "bottom-center": "md:bottom-0 md:start-1/2 md:-translate-x-1/2 md:translate-y-1/2",
+  "bottom-end": "md:bottom-0 md:end-0 md:translate-x-1/2 md:translate-y-1/2 md:rtl:-translate-x-1/2"
+};
+var POSITION_LG = {
+  "top-start": "lg:top-0 lg:start-0 lg:-translate-x-1/2 lg:-translate-y-1/2 lg:rtl:translate-x-1/2",
+  "top-center": "lg:top-0 lg:start-1/2 lg:-translate-x-1/2 lg:-translate-y-1/2",
+  "top-end": "lg:top-0 lg:end-0 lg:translate-x-1/2 lg:-translate-y-1/2 lg:rtl:-translate-x-1/2",
+  "middle-start": "lg:top-1/2 lg:start-0 lg:-translate-x-1/2 lg:-translate-y-1/2 lg:rtl:translate-x-1/2",
+  "middle-center": "lg:top-1/2 lg:start-1/2 lg:-translate-x-1/2 lg:-translate-y-1/2",
+  "middle-end": "lg:top-1/2 lg:end-0 lg:translate-x-1/2 lg:-translate-y-1/2 lg:rtl:-translate-x-1/2",
+  "bottom-start": "lg:bottom-0 lg:start-0 lg:-translate-x-1/2 lg:translate-y-1/2 lg:rtl:translate-x-1/2",
+  "bottom-center": "lg:bottom-0 lg:start-1/2 lg:-translate-x-1/2 lg:translate-y-1/2",
+  "bottom-end": "lg:bottom-0 lg:end-0 lg:translate-x-1/2 lg:translate-y-1/2 lg:rtl:-translate-x-1/2"
+};
+var POSITION_XL = {
+  "top-start": "xl:top-0 xl:start-0 xl:-translate-x-1/2 xl:-translate-y-1/2 xl:rtl:translate-x-1/2",
+  "top-center": "xl:top-0 xl:start-1/2 xl:-translate-x-1/2 xl:-translate-y-1/2",
+  "top-end": "xl:top-0 xl:end-0 xl:translate-x-1/2 xl:-translate-y-1/2 xl:rtl:-translate-x-1/2",
+  "middle-start": "xl:top-1/2 xl:start-0 xl:-translate-x-1/2 xl:-translate-y-1/2 xl:rtl:translate-x-1/2",
+  "middle-center": "xl:top-1/2 xl:start-1/2 xl:-translate-x-1/2 xl:-translate-y-1/2",
+  "middle-end": "xl:top-1/2 xl:end-0 xl:translate-x-1/2 xl:-translate-y-1/2 xl:rtl:-translate-x-1/2",
+  "bottom-start": "xl:bottom-0 xl:start-0 xl:-translate-x-1/2 xl:translate-y-1/2 xl:rtl:translate-x-1/2",
+  "bottom-center": "xl:bottom-0 xl:start-1/2 xl:-translate-x-1/2 xl:translate-y-1/2",
+  "bottom-end": "xl:bottom-0 xl:end-0 xl:translate-x-1/2 xl:translate-y-1/2 xl:rtl:-translate-x-1/2"
+};
+var POSITION_2XL = {
+  "top-start": "2xl:top-0 2xl:start-0 2xl:-translate-x-1/2 2xl:-translate-y-1/2 2xl:rtl:translate-x-1/2",
+  "top-center": "2xl:top-0 2xl:start-1/2 2xl:-translate-x-1/2 2xl:-translate-y-1/2",
+  "top-end": "2xl:top-0 2xl:end-0 2xl:translate-x-1/2 2xl:-translate-y-1/2 2xl:rtl:-translate-x-1/2",
+  "middle-start": "2xl:top-1/2 2xl:start-0 2xl:-translate-x-1/2 2xl:-translate-y-1/2 2xl:rtl:translate-x-1/2",
+  "middle-center": "2xl:top-1/2 2xl:start-1/2 2xl:-translate-x-1/2 2xl:-translate-y-1/2",
+  "middle-end": "2xl:top-1/2 2xl:end-0 2xl:translate-x-1/2 2xl:-translate-y-1/2 2xl:rtl:-translate-x-1/2",
+  "bottom-start": "2xl:bottom-0 2xl:start-0 2xl:-translate-x-1/2 2xl:translate-y-1/2 2xl:rtl:translate-x-1/2",
+  "bottom-center": "2xl:bottom-0 2xl:start-1/2 2xl:-translate-x-1/2 2xl:translate-y-1/2",
+  "bottom-end": "2xl:bottom-0 2xl:end-0 2xl:translate-x-1/2 2xl:translate-y-1/2 2xl:rtl:-translate-x-1/2"
+};
+var BP_MAPS = {
+  sm: POSITION_SM,
+  md: POSITION_MD,
+  lg: POSITION_LG,
+  xl: POSITION_XL,
+  "2xl": POSITION_2XL
+};
+var RESPONSIVE_KEYS = ["sm", "md", "lg", "xl", "2xl"];
+function resolvePosition(pos) {
+  if (!pos) {
+    return { base: "top-end", classes: POSITION["top-end"] };
+  }
+  if (typeof pos === "string") {
+    return { base: pos, classes: POSITION[pos] };
+  }
+  const base = pos.base ?? "top-end";
+  const extras = RESPONSIVE_KEYS.filter((bp) => pos[bp]).map((bp) => BP_MAPS[bp][pos[bp]]);
+  return { base, classes: cn(POSITION[base], ...extras) };
+}
+var colorBg = {
+  primary: "bg-pink-500",
+  secondary: "bg-indigo-500",
+  accent: "bg-orange-500",
+  neutral: "bg-slate-500",
+  info: "bg-sky-500",
+  success: "bg-emerald-500",
+  warning: "bg-amber-400",
+  destructive: "bg-red-500"
+};
+var sizeDot = {
+  sm: "size-2",
+  md: "size-3",
+  lg: "size-4"
+};
+var sizeStatus = {
+  sm: "size-2.5",
+  md: "size-3",
+  lg: "size-4"
+};
+var indicatorVariants = cva("relative inline-flex w-fit", {
+  variants: {},
+  defaultVariants: {}
+});
+function DefaultCloseButton() {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Dismiss",
+      className: "flex items-center justify-center size-6 rounded-full bg-destructive text-white text-xs font-semibold hover:bg-destructive/90 transition-colors",
+      children: "\xD7"
+    }
+  );
+}
+function NIndicator({
+  children,
+  position = "top-end",
+  overlay = "dot",
+  color = "primary",
+  size = "md",
+  shape = "default",
+  content,
+  ping,
+  pulse,
+  className,
+  overlayClassName,
+  ...rest
+}) {
+  const { base, classes } = resolvePosition(position);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "indicator",
+      "data-position": base,
+      className: cn(indicatorVariants(), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "indicator-overlay",
+            "data-position": base,
+            className: cn("absolute z-10", classes, overlayClassName),
+            children: [
+              (overlay === "dot" || overlay === "status") && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "relative inline-flex rounded-full",
+                    overlay === "dot" ? sizeDot[size] : sizeStatus[size]
+                  ),
+                  children: [
+                    ping && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-slot": "indicator-ping",
+                        "aria-hidden": "true",
+                        className: cn(
+                          "absolute inset-0 rounded-full animate-ping opacity-60",
+                          colorBg[color]
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "relative rounded-full size-full",
+                          colorBg[color],
+                          overlay === "status" && "ring-2 ring-background"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              overlay === "badge" && /* @__PURE__ */ jsx(
+                NBadge,
+                {
+                  color,
+                  look: "solid",
+                  shape,
+                  className: cn(pulse && "animate-pulse"),
+                  children: content
+                }
+              ),
+              overlay === "button" && (content ?? /* @__PURE__ */ jsx(DefaultCloseButton, {})),
+              overlay === "custom" && content
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+NIndicator.displayName = "NIndicator";
+var Indicator = NIndicator;
 function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsx(
     "input",
@@ -700,7 +953,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -824,6 +1077,66 @@ function SheetTitle({ className, ...props }) {
 function SheetDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className), ...props });
 }
+function assignRef(ref, node) {
+  if (!ref) return;
+  if (typeof ref === "function") ref(node);
+  else ref.current = node;
+}
+function applyViewportLayout(node, axis) {
+  node.style.width = "100%";
+  node.style.height = "100%";
+  node.style.minWidth = "0";
+  node.style.minHeight = "0";
+  node.style.overflowX = axis === "x" || axis === "both" ? "auto" : "hidden";
+  node.style.overflowY = axis === "y" || axis === "both" ? "auto" : "hidden";
+}
+function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    OverlayScrollbarsComponent,
+    {
+      className: cn(className),
+      style: {
+        ...style,
+        display: "flex",
+        alignItems: "stretch",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        overflow: "hidden",
+        minHeight: 0,
+        minWidth: 0
+      },
+      element,
+      defer: true,
+      options: {
+        scrollbars: { theme: "os-theme-najm", autoHide, autoHideDelay: 500, clickScroll: true },
+        overflow: {
+          x: axis === "x" || axis === "both" ? "scroll" : "hidden",
+          y: axis === "y" || axis === "both" ? "scroll" : "hidden"
+        },
+        ...options
+      },
+      events: {
+        ...events,
+        initialized: (instance, ...rest) => {
+          const viewport = instance.elements().viewport;
+          applyViewportLayout(viewport, axis);
+          assignRef(viewportRef, viewport);
+          events?.initialized?.(instance, ...rest);
+        },
+        updated: (instance, ...rest) => {
+          applyViewportLayout(instance.elements().viewport, axis);
+          events?.updated?.(instance, ...rest);
+        },
+        destroyed: (instance, ...rest) => {
+          assignRef(viewportRef, null);
+          events?.destroyed?.(instance, ...rest);
+        }
+      },
+      ...props,
+      children
+    }
+  );
+}
 var PortalScopeContext = createContext(void 0);
 function NPortalScopeProvider({ className, children }) {
   return /* @__PURE__ */ jsx(PortalScopeContext.Provider, { value: className, children });
@@ -863,7 +1176,7 @@ function NSheet({
           /* @__PURE__ */ jsx(SheetTitle, { className: "text-sm font-semibold text-txt-primary", children: title }),
           description && /* @__PURE__ */ jsx(SheetDescription, { className: "text-xs text-txt-muted", children: description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-6 py-5", bodyClassName), children }),
+        /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: cn("px-6 py-5", bodyClassName), children }) }),
         footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border px-6 py-3", children: footer })
       ]
     }
@@ -966,16 +1279,33 @@ function createDialogStore() {
           width: config.width,
           height: config.height,
           className: config.className,
+          actionMode: config.actionMode ?? "auto",
+          render: config.render,
           resolve,
           reject
         };
         set((state) => ({ dialogs: [...state.dialogs, dialogConfig] }));
       });
     },
-    popDialog: (result) => {
+    popDialog: async (result) => {
       const { dialogs } = get();
       if (dialogs.length === 0) return;
       const dialog = dialogs[dialogs.length - 1];
+      const closeCurrentDialog = () => {
+        dialog.resolve?.(result);
+        set((state) => ({ dialogs: state.dialogs.slice(0, -1) }));
+      };
+      const handler2 = dialog.primaryButton?.onClick ?? dialog.primaryButton?.onConfirm;
+      if (handler2 && result != null) {
+        get().setPrimaryLoading(true);
+        try {
+          await handler2(result);
+          closeCurrentDialog();
+        } finally {
+          get().setPrimaryLoading(false);
+        }
+        return;
+      }
       dialog.resolve?.(result);
       set((state) => ({ dialogs: state.dialogs.slice(0, -1) }));
     },
@@ -1143,7 +1473,47 @@ var dialogVariants = cva(
     }
   }
 );
+var CONTENT_ACTIONS_SELECTOR = '[data-najm-dialog-actions="content"], [data-najm-wizard-form="true"]';
+function useContentOwnsActions() {
+  const [contentElement, setContentElement] = React38__default.useState(null);
+  const [contentOwnsActions, setContentOwnsActions] = React38__default.useState(false);
+  React38__default.useLayoutEffect(() => {
+    if (!contentElement) {
+      setContentOwnsActions(false);
+      return;
+    }
+    const update = () => {
+      setContentOwnsActions(!!contentElement.querySelector(CONTENT_ACTIONS_SELECTOR));
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(contentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-najm-dialog-actions", "data-najm-wizard-form"]
+    });
+    return () => observer.disconnect();
+  }, [contentElement]);
+  return { contentOwnsActions, setContentElement };
+}
+function shouldRenderDialogButtons(showButtons, actionMode = "auto", contentOwnsActions) {
+  if (!showButtons || actionMode === "content") return false;
+  if (actionMode === "auto" && contentOwnsActions) return false;
+  return true;
+}
 function DialogItem({ dialog, index, store }) {
+  if (dialog.render) {
+    return /* @__PURE__ */ jsx(Fragment, { children: dialog.render({
+      dialog,
+      index,
+      zIndex: 9990 + index,
+      close: (result) => store.getState().closeDialog(dialog.id, result),
+      confirm: (data) => store.getState().handlePrimaryClick(dialog.id, data),
+      cancel: (data) => store.getState().handleSecondaryClick(dialog.id, data),
+      onOpenChange: (open) => store.getState().handleOpenChange(dialog.id, open)
+    }) });
+  }
   const {
     id,
     title,
@@ -1155,8 +1525,11 @@ function DialogItem({ dialog, index, store }) {
     size,
     width,
     height,
-    className
+    className,
+    actionMode = "auto"
   } = dialog;
+  const { contentOwnsActions, setContentElement } = useContentOwnsActions();
+  const renderDialogButtons = shouldRenderDialogButtons(showButtons, actionMode, contentOwnsActions);
   const noTitle = !title || title.trim() === "";
   const noDescription = !description || description.trim() === "";
   const noHeader = noTitle && noDescription;
@@ -1181,9 +1554,9 @@ function DialogItem({ dialog, index, store }) {
           /* @__PURE__ */ jsx(DialogTitle, { className: cn(noTitle && "sr-only"), children: title }),
           /* @__PURE__ */ jsx(DialogDescription, { className: cn(noDescription && "sr-only"), children: description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden px-1 -mx-1", children }),
-        /* @__PURE__ */ jsxs(DialogFooter, { className: cn(!showButtons && "sr-only"), children: [
-          secondaryButton && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1 px-1 -mx-1", children: /* @__PURE__ */ jsx("div", { ref: setContentElement, style: { display: "contents" }, children }) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: cn(!renderDialogButtons && "sr-only"), children: [
+          renderDialogButtons && secondaryButton && /* @__PURE__ */ jsx(
             Button,
             {
               type: secondaryButton.form ? "submit" : "button",
@@ -1199,7 +1572,7 @@ function DialogItem({ dialog, index, store }) {
               children: secondaryButton.text
             }
           ),
-          primaryButton && /* @__PURE__ */ jsx(
+          renderDialogButtons && primaryButton && /* @__PURE__ */ jsx(
             Button,
             {
               type: primaryButton.form ? "submit" : "button",
@@ -1247,11 +1620,12 @@ function NDirectDialog({
   width,
   height,
   className,
+  actionMode = "auto",
   closeOnPrimary = true,
   closeOnSecondary = true
 }) {
-  const [internalOpen, setInternalOpen] = React32__default.useState(defaultOpen);
-  const [primaryLoading, setPrimaryLoading] = React32__default.useState(false);
+  const [internalOpen, setInternalOpen] = React38__default.useState(defaultOpen);
+  const [primaryLoading, setPrimaryLoading] = React38__default.useState(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = (nextOpen) => {
@@ -1278,6 +1652,8 @@ function NDirectDialog({
   const noDescription = !description || description.trim() === "";
   const noHeader = noTitle && noDescription;
   const isPrimaryLoading = primaryLoading || !!resolvedPrimaryButton.loading;
+  const { contentOwnsActions, setContentElement } = useContentOwnsActions();
+  const renderDialogButtons = shouldRenderDialogButtons(showButtons, actionMode, contentOwnsActions);
   const handlePrimary = async (e) => {
     const hasForm = !!resolvedPrimaryButton.form;
     if (!hasForm && e) e.preventDefault();
@@ -1310,8 +1686,8 @@ function NDirectDialog({
         /* @__PURE__ */ jsx(DialogTitle, { className: cn(noTitle && "sr-only"), children: title }),
         /* @__PURE__ */ jsx(DialogDescription, { className: cn(noDescription && "sr-only"), children: description })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden px-1 -mx-1", children }),
-      /* @__PURE__ */ jsx(DialogFooter, { className: cn(!showButtons && "sr-only"), children: showButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1 px-1 -mx-1", children: /* @__PURE__ */ jsx("div", { ref: setContentElement, style: { display: "contents" }, children }) }),
+      /* @__PURE__ */ jsx(DialogFooter, { className: cn(!renderDialogButtons && "sr-only"), children: renderDialogButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -1399,27 +1775,104 @@ function NConfirmDialog({
 function NDeleteDialogContent({
   itemName,
   itemType,
-  icon: Icon2,
-  warningText = "This action cannot be undone.",
+  icon: Icon2 = "trash-2",
+  warningText = "Are you sure you want to delete?",
   className
 }) {
-  return /* @__PURE__ */ jsx("form", { id: "najm-delete-form", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 py-4", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-20 h-20 rounded-full bg-red-100 dark:bg-red-900/30", children: /* @__PURE__ */ jsx(NIcon, { icon: Icon2 ?? "alert-triangle", className: "h-10 w-10 text-red-500" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
-      /* @__PURE__ */ jsxs("p", { className: "text-md text-muted-foreground mb-2", children: [
-        "Are you sure you want to delete ",
-        /* @__PURE__ */ jsx("strong", { children: itemName }),
-        itemType ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          " (",
-          itemType,
-          ")"
-        ] }) : null,
-        "?"
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-md text-muted-foreground", children: warningText })
+  return /* @__PURE__ */ jsx("form", { id: "najm-delete-form", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-6 flex size-16 items-center justify-center rounded-[20px] bg-destructive/10 text-destructive dark:bg-[#5a1822] dark:text-white", children: /* @__PURE__ */ jsx(NIcon, { icon: Icon2, className: "size-7" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold leading-none text-card-foreground dark:text-white", children: "Delete" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-5 text-muted-foreground dark:text-[#aab4c2]", children: warningText }),
+        /* @__PURE__ */ jsxs("p", { className: "max-w-[280px] truncate text-sm font-bold leading-5 text-card-foreground dark:text-white", children: [
+          '"',
+          itemName,
+          '"',
+          itemType ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            " (",
+            itemType,
+            ")"
+          ] }) : null
+        ] })
+      ] })
     ] })
   ] }) });
 }
+function NDeleteDialog({
+  open = true,
+  title = "Delete",
+  description,
+  itemName,
+  itemType,
+  icon,
+  warningText,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  loading,
+  zIndex,
+  className,
+  contentClassName,
+  onOpenChange,
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: cn(
+        "h-auto max-w-[380px] gap-0 rounded-[18px] border border-border bg-card p-6 pt-8 shadow-2xl dark:border-0 dark:bg-[#222b38]",
+        "[&>button]:right-4 [&>button]:top-4 [&>button]:flex [&>button]:size-6 [&>button]:items-center [&>button]:justify-center",
+        "[&>button]:rounded-full [&>button]:bg-muted [&>button]:text-muted-foreground [&>button]:opacity-100 [&>button]:ring-offset-0",
+        "[&>button]:hover:bg-secondary [&>button]:hover:text-foreground dark:[&>button]:bg-[#4d5a6d] dark:[&>button]:text-white dark:[&>button]:hover:bg-[#647186] dark:[&>button]:hover:text-white",
+        className
+      ),
+      style: { zIndex },
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          NDeleteDialogContent,
+          {
+            itemName,
+            itemType,
+            icon,
+            warningText,
+            className: contentClassName
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "mt-6 grid grid-cols-2 gap-3 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              "data-button-type": "secondary",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: loading,
+              className: "h-10 w-full rounded-[10px] border border-border bg-secondary text-sm font-bold text-secondary-foreground shadow-none hover:bg-secondary/80 hover:text-secondary-foreground dark:border-0 dark:bg-[#3e4a5d] dark:text-white dark:hover:bg-[#4b586c] dark:hover:text-white",
+              children: cancelText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              "data-button-type": "primary",
+              variant: "destructive",
+              onClick: onConfirm,
+              loading,
+              className: "h-10 w-full rounded-[10px] bg-destructive text-sm font-bold text-destructive-foreground shadow-none hover:bg-destructive/90 focus-visible:ring-destructive/40 dark:bg-[#dc4d61] dark:text-white dark:hover:bg-[#e15f70] dark:focus-visible:ring-[#dc4d61]/40",
+              children: confirmText
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
 function useDialog(store) {
   const resolvedStore = store ?? useDialogStore();
   const custom = async (options) => {
@@ -1433,17 +1886,27 @@ function useDialog(store) {
   const confirmDelete = async (options) => {
     try {
       return await resolvedStore.getState().pushDialog({
-        title: options.title || "Confirm Deletion",
+        title: options.title || "Delete",
         description: options.description,
-        children: React32__default.createElement(NDeleteDialogContent, {
+        size: options.size || "sm",
+        className: options.className,
+        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React38__default.createElement(NDeleteDialog, {
           itemName: options.itemName,
           itemType: options.itemType,
-          icon: options.icon
+          icon: options.icon,
+          title: dialog.title,
+          description: dialog.description,
+          confirmText: dialog.primaryButton?.text,
+          cancelText: dialog.secondaryButton?.text,
+          loading: dialog.primaryButton?.loading,
+          className: dialog.className,
+          zIndex,
+          onOpenChange,
+          onConfirm: () => confirm(),
+          onCancel: () => cancel()
         }),
-        size: options.size || "sm",
-        className: options.className,
         primaryButton: {
-          text: options.confirmText || "Delete",
+          text: options.confirmText || "Confirm",
           variant: "destructive",
           loading: options.loading,
           onClick: options.onConfirm
@@ -1633,7 +2096,8 @@ function DropdownMenuSubContent({ className, ...props }) {
   );
 }
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  const container = React38.useContext(NajmThemeContainerCtx);
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -1709,7 +2173,8 @@ function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  const container = React38.useContext(NajmThemeContainerCtx);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -1738,7 +2203,7 @@ function SelectTrigger({ className, children, ...props }) {
     {
       "data-slot": "select-trigger",
       className: cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -1756,7 +2221,8 @@ function SelectScrollDownButton({ className, ...props }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" }) });
 }
 function SelectContent({ className, children, position = "popper", ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  const container = React38.useContext(NajmThemeContainerCtx);
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -1795,7 +2261,7 @@ function SelectItem({ className, children, ...props }) {
 function SelectSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("bg-muted pointer-events-none -mx-1 my-1 h-px", className), ...props });
 }
-var NativeSelect = React32.forwardRef(
+var NativeSelect = React38.forwardRef(
   ({ className, options, placeholder, value, ...props }, ref) => {
     const hasValue = value !== void 0 && value !== "";
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -1975,8 +2441,9 @@ var triggerVariantMap = {
   ].join(" "),
   ghost: [
     "data-[state=active]:text-foreground",
-    "data-[state=active]:bg-secondary",
-    "rounded-md px-2 py-1"
+    "data-[state=active]:bg-secondary dark:data-[state=active]:bg-card",
+    "rounded-md px-2 py-1",
+    "h-full"
   ].join(" ")
 };
 function TabsTrigger({
@@ -2000,6 +2467,121 @@ function TabsTrigger({
 function TabsContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
 }
+
+// src/components/tabs/tabColors.ts
+var TAB_COLORS = {
+  default: { list: "bg-muted", active: "bg-background" },
+  primary: { list: "bg-primary/20", active: "bg-primary/50" },
+  card: { list: "bg-card", active: "bg-muted" },
+  ghost: { list: "bg-transparent", active: "bg-accent" }
+};
+function hexToRgb(hex) {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return m ? { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) } : { r: 0, g: 0, b: 0 };
+}
+function accentStyles(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return {
+    list: { backgroundColor: `rgba(${r},${g},${b},0.12)` },
+    trigger: { color: `rgba(${r},${g},${b},0.7)` },
+    activeTrigger: { backgroundColor: hex, color: luminance > 0.55 ? "#1e293b" : "#ffffff" }
+  };
+}
+function NTabs({
+  items,
+  defaultValue,
+  value,
+  onValueChange,
+  variant = "pills",
+  orientation = "horizontal",
+  color = "default",
+  accentColor,
+  fullWidth = false,
+  className,
+  classNames,
+  styles
+}) {
+  const preset = TAB_COLORS[color];
+  const activeClass = `data-[state=active]:${preset.active}`;
+  const isHorizontal = orientation === "horizontal";
+  const [currentValue, setCurrentValue] = useState(
+    value ?? defaultValue ?? items[0]?.value ?? ""
+  );
+  useEffect(() => {
+    if (value !== void 0) setCurrentValue(value);
+  }, [value]);
+  const handleChange = (v) => {
+    setCurrentValue(v);
+    onValueChange?.(v);
+  };
+  const derived = accentColor ? accentStyles(accentColor) : null;
+  const listStyle = variant === "ghost" || variant === "bordered" ? styles?.list : derived?.list ?? styles?.list;
+  const triggerStyle = derived?.trigger ?? styles?.trigger;
+  const activeStyle = derived ? variant === "bordered" ? { borderColor: accentColor, color: accentColor } : derived.activeTrigger : styles?.activeTrigger;
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value,
+      defaultValue,
+      onValueChange: handleChange,
+      variant,
+      orientation,
+      className: classNames?.root,
+      style: styles?.root,
+      children: [
+        /* @__PURE__ */ jsx(
+          TabsList,
+          {
+            variant,
+            orientation,
+            className: cn(
+              !accentColor && variant === "pills" && preset.list,
+              fullWidth && isHorizontal && "w-full",
+              classNames?.list,
+              className
+            ),
+            style: listStyle,
+            children: items.map((item) => /* @__PURE__ */ jsxs(
+              TabsTrigger,
+              {
+                value: item.value,
+                variant,
+                disabled: item.disabled,
+                className: cn(
+                  !accentColor && activeClass,
+                  fullWidth && isHorizontal && "flex-1",
+                  classNames?.trigger
+                ),
+                style: {
+                  ...triggerStyle,
+                  ...currentValue === item.value ? activeStyle : {}
+                },
+                children: [
+                  item.icon && /* @__PURE__ */ jsx(NIcon, { icon: item.icon, size: 14 }),
+                  item.label
+                ]
+              },
+              item.value
+            ))
+          }
+        ),
+        items.map(
+          (item) => item.content != null ? /* @__PURE__ */ jsx(
+            TabsContent,
+            {
+              value: item.value,
+              className: classNames?.content,
+              style: styles?.content,
+              children: item.content
+            },
+            item.value
+          ) : null
+        )
+      ]
+    }
+  );
+}
 function TooltipProvider({ delayDuration = 0, ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
 }
@@ -2022,7 +2604,8 @@ var tooltipContentVariants = cva(
   }
 );
 function TooltipContent({ className, sideOffset = 4, variant, children, ...props }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  const container = React38.useContext(NajmThemeContainerCtx);
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -2183,7 +2766,7 @@ function ScrollArea({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: "h-full w-full overflow-y-auto overflow-x-hidden",
+      className: "h-full w-full najm-overlay-scroll-y overflow-x-hidden",
       style: {
         scrollbarWidth: "thin",
         scrollbarColor: "#3a3a4e transparent"
@@ -2282,7 +2865,7 @@ function Avatar({
   ...props
 }) {
   const hasShortcut = src !== void 0 || fallback !== void 0;
-  const hasChildren = React32.Children.count(children) > 0;
+  const hasChildren = React38.Children.count(children) > 0;
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
@@ -2376,9 +2959,9 @@ function AvatarGroup({ ring = true, className, children, ...props }) {
       "data-slot": "avatar-group",
       className: cn("flex -space-x-2", className),
       ...props,
-      children: ring ? React32.Children.map(children, (child) => {
-        if (React32.isValidElement(child) && child.type === Avatar) {
-          return React32.cloneElement(child, { ring: true, ...child.props });
+      children: ring ? React38.Children.map(children, (child) => {
+        if (React38.isValidElement(child) && child.type === Avatar) {
+          return React38.cloneElement(child, { ring: true, ...child.props });
         }
         return child;
       }) : children
@@ -2445,7 +3028,7 @@ function Swap({
   className,
   ...props
 }) {
-  const [internalChecked, setInternalChecked] = React32.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React38.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0 || controlledState !== void 0;
   const currentState = getDerivedState(
     isControlled ? controlledChecked ?? false : internalChecked,
@@ -2453,7 +3036,7 @@ function Swap({
   );
   const dataState = currentState === "indeterminate" ? "indeterminate" : currentState ? "on" : "off";
   const ariaPressed = currentState === "indeterminate" ? "mixed" : currentState;
-  const handleClick = React32.useCallback((event) => {
+  const handleClick = React38.useCallback((event) => {
     onClick?.(event);
     if (event.defaultPrevented) return;
     if (disabled) return;
@@ -2590,7 +3173,7 @@ function CommandInput({ className, ...props }) {
   ] });
 }
 function CommandList({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Command$1.List, { "data-slot": "command-list", className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className), ...props });
+  return /* @__PURE__ */ jsx(Command$1.List, { "data-slot": "command-list", className: cn("max-h-[300px] najm-overlay-scroll-y overflow-x-hidden", className), ...props });
 }
 function CommandEmpty({ ...props }) {
   return /* @__PURE__ */ jsx(Command$1.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props });
@@ -2624,7 +3207,7 @@ function CollapsibleContent2({ ...props }) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
 }
 var toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -2657,7 +3240,7 @@ var sizeClasses = {
   md: "h-8 w-8",
   lg: "h-10 w-10"
 };
-var IconButton = React32.forwardRef(
+var IconButton = React38.forwardRef(
   ({
     className,
     variant = "ghost",
@@ -2674,7 +3257,7 @@ var IconButton = React32.forwardRef(
         type,
         "aria-pressed": active || void 0,
         className: cn(
-          "inline-flex shrink-0 items-center justify-center rounded-md transition-colors",
+          "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors",
           "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           "disabled:cursor-not-allowed disabled:opacity-50",
           variantClasses[variant],
@@ -2769,7 +3352,7 @@ var toneClasses = {
     ring: "border-primary/30"
   }
 };
-var StatusPill = React32.forwardRef(
+var StatusPill = React38.forwardRef(
   ({ className, tone = "neutral", pulse = false, label, ...props }, ref) => {
     const c = toneClasses[tone];
     return /* @__PURE__ */ jsxs(
@@ -2827,20 +3410,20 @@ function Toaster({ ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React32.createContext({});
+var FormFieldContext = React38.createContext({});
 var FormField = ({ ...props }) => /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 var useFormField = () => {
-  const fieldContext = React32.useContext(FormFieldContext);
-  const itemContext = React32.useContext(FormItemContext);
+  const fieldContext = React38.useContext(FormFieldContext);
+  const itemContext = React38.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
   const { id } = itemContext;
   return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState };
 };
-var FormItemContext = React32.createContext({});
+var FormItemContext = React38.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React32.useId();
+  const id = React38.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -2862,10 +3445,10 @@ function FormMessage({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-[0.8rem] font-medium", className), ...props, children: body });
 }
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full", children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("bg-muted/80 [&_tr]:border-b [&_tr]:border-border/40 [&_tr]:hover:bg-transparent", className), ...props });
+  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b [&_tr]:border-border/40", className), ...props });
 }
 function TableBody({ className, ...props }) {
   return /* @__PURE__ */ jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props });
@@ -2984,7 +3567,7 @@ function NErrorState({ title = "Something went wrong", message, onRetry, retryLa
   ] });
 }
 function NEmptyState({ title = "No data", description, icon, action, className }) {
-  const iconContent = icon ? React32__default.isValidElement(icon) ? icon : React32__default.createElement(icon, { className: "h-8 w-8" }) : null;
+  const iconContent = icon ? React38__default.isValidElement(icon) ? icon : React38__default.createElement(icon, { className: "h-8 w-8" }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
     iconContent && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/50", children: iconContent }),
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -2994,7 +3577,7 @@ function NEmptyState({ title = "No data", description, icon, action, className }
     action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
   ] });
 }
-var NErrorBoundary = class extends React32__default.Component {
+var NErrorBoundary = class extends React38__default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -3240,16 +3823,18 @@ function NCard({
   onRetry,
   noPadding = false,
   separator = false,
+  bordered = false,
   className,
-  classNames
+  classNames,
+  onClick
 }) {
   const isEmpty = empty ?? noData ?? false;
   const resolvedEmptyText = emptyText ?? noDataText ?? "No data available";
   let actionSlot = null;
   let footerSlot = null;
   const mainChildren = [];
-  React32__default.Children.forEach(children, (child) => {
-    if (React32__default.isValidElement(child)) {
+  React38__default.Children.forEach(children, (child) => {
+    if (React38__default.isValidElement(child)) {
       if (child.type === NCardAction) {
         actionSlot = child;
       } else if (child.type === NCardFooter) {
@@ -3263,27 +3848,41 @@ function NCard({
   });
   const hasHeader = !!(title || description || actionSlot);
   const iconSize = description ? "h-8 w-8" : "h-5 w-5";
-  return /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col", !noPadding && "p-4 gap-3", classNames?.root, className), children: [
-    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { className: cn("flex flex-row items-center justify-between space-y-0 p-0", classNames?.header), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-        icon && /* @__PURE__ */ jsx(NIcon, { icon, className: cn(iconSize, "shrink-0 text-muted-foreground", iconColor, classNames?.icon) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          title && /* @__PURE__ */ jsx(CardTitle, { className: cn("text-base leading-snug", classNames?.title), children: title }),
-          description && /* @__PURE__ */ jsx(CardDescription, { className: cn("text-xs mt-0.5", classNames?.description), children: description })
-        ] })
-      ] }),
-      actionSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0 ml-2", children: actionSlot })
-    ] }),
-    hasHeader && separator && /* @__PURE__ */ jsx("div", { className: "border-t" }),
-    /* @__PURE__ */ jsx(CardContent, { className: cn("flex flex-col flex-1 m-0 p-0", classNames?.content), children: loading && skeleton ? skeleton : loading ? /* @__PURE__ */ jsx(NLoadingState, { label: loadingText }) : error ? /* @__PURE__ */ jsx(
-      NErrorState,
-      {
-        message: typeof error === "string" ? error : errorText ?? "Something went wrong",
-        onRetry
-      }
-    ) : isEmpty ? /* @__PURE__ */ jsx(NEmptyState, { title: resolvedEmptyText }) : mainChildren }),
-    footerSlot && /* @__PURE__ */ jsx(CardFooter, { className: cn("p-0 pt-3 border-t mt-auto", classNames?.footer), children: footerSlot })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      "data-bordered": bordered ? "true" : void 0,
+      onClick,
+      className: cn(
+        "flex flex-col",
+        !noPadding && "p-4 gap-3",
+        bordered && "border border-muted-foreground shadow-none",
+        classNames?.root,
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs(CardHeader, { className: cn("flex flex-row items-center justify-between space-y-0 p-0", classNames?.header), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            icon && /* @__PURE__ */ jsx(NIcon, { icon, className: cn(iconSize, "shrink-0 text-muted-foreground", iconColor, classNames?.icon) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx(CardTitle, { className: cn("text-base leading-snug", classNames?.title), children: title }),
+              description && /* @__PURE__ */ jsx(CardDescription, { className: cn("text-xs mt-0.5", classNames?.description), children: description })
+            ] })
+          ] }),
+          actionSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0 ml-2", children: actionSlot })
+        ] }),
+        hasHeader && separator && /* @__PURE__ */ jsx("div", { className: "border-t" }),
+        /* @__PURE__ */ jsx(CardContent, { className: cn("flex flex-col flex-1 m-0 p-0", classNames?.content), children: loading && skeleton ? skeleton : loading ? /* @__PURE__ */ jsx(NLoadingState, { label: loadingText }) : error ? /* @__PURE__ */ jsx(
+          NErrorState,
+          {
+            message: typeof error === "string" ? error : errorText ?? "Something went wrong",
+            onRetry
+          }
+        ) : isEmpty ? /* @__PURE__ */ jsx(NEmptyState, { title: resolvedEmptyText }) : mainChildren }),
+        footerSlot && /* @__PURE__ */ jsx(CardFooter, { className: cn("p-0 pt-3 border-t mt-auto", classNames?.footer), children: footerSlot })
+      ]
+    }
+  );
 }
 function truncateByCharacters(text, maxCharacters, suffix = "...") {
   if (!text) return "";
@@ -3445,25 +4044,31 @@ function DefaultCard({
   subtext,
   change,
   onClick,
+  bordered,
   className,
   classNames
 }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    NCard,
     {
+      noPadding: true,
       onClick,
+      bordered,
       className: cn(
-        "group flex items-center gap-4 rounded-xl border border-border bg-card p-4 transition-colors",
+        "group p-4 transition-colors",
         onClick && "cursor-pointer hover:border-border/60 hover:bg-accent/40",
-        classNames?.root,
         className
       ),
+      classNames: {
+        root: classNames?.root,
+        content: "flex-row items-center gap-4"
+      },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
+              "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
               classNames?.icon
             ),
             children: /* @__PURE__ */ jsx(NIcon, { icon, className: "w-7 h-7" })
@@ -3486,7 +4091,7 @@ function DefaultCard({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("p", { className: cn("text-2xl font-semibold leading-none text-foreground", classNames?.value), children: value }),
+          /* @__PURE__ */ jsx("p", { className: cn("text-xl font-semibold leading-none text-foreground", classNames?.value), children: value }),
           subtext && /* @__PURE__ */ jsx("p", { className: cn("text-[10px] text-muted-foreground", classNames?.description), children: subtext })
         ] })
       ]
@@ -3504,21 +4109,24 @@ function UsageCard({
   accentColor,
   countLabel,
   onClick,
+  bordered,
   className,
   classNames
 }) {
   const pct = total > 0 ? Math.min(Math.max(used / total * 100, 0), 100) : 0;
   const itemLabel = countLabel ?? (count === 1 ? "Item" : "Items");
   return /* @__PURE__ */ jsxs(
-    "div",
+    NCard,
     {
+      noPadding: true,
       onClick,
+      bordered,
       className: cn(
-        "group min-h-[116px] rounded-[10px] border border-border bg-card px-4 py-4 transition-colors",
+        "group min-h-[116px] px-4 py-4 transition-colors",
         onClick && "cursor-pointer hover:bg-accent/30",
-        classNames?.root,
         className
       ),
+      classNames: { root: classNames?.root },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx(
@@ -3557,17 +4165,23 @@ function UsageCard({
     }
   );
 }
-function CompactCard({ icon, label, value, unit, iconColor, onClick, className, classNames }) {
+function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, className, classNames }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    NCard,
     {
+      noPadding: true,
       onClick,
+      bordered,
       className: cn(
-        "rounded-lg bg-foreground/10 p-3 flex flex-col items-center justify-center",
+        !bordered && "border-0",
+        "bg-foreground/10 p-3 shadow-none",
         onClick && "cursor-pointer",
-        classNames?.root,
         className
       ),
+      classNames: {
+        root: classNames?.root,
+        content: "items-center justify-center"
+      },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
           /* @__PURE__ */ jsx(NIcon, { icon, className: cn("w-4 h-4", iconColor ?? "text-primary", classNames?.icon) }),
@@ -3700,6 +4314,22 @@ function NViewBody({ children, className, variant = "table" }) {
 function NContextMenu({ x, y, items, onAction, onClose, className }) {
   const [openSub, setOpenSub] = useState(null);
   const menuRef = useRef(null);
+  const [pos, setPos] = useState({ left: x, top: y });
+  useLayoutEffect(() => {
+    if (!menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const pad = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = x;
+    let top = y;
+    if (left + rect.width > vw - pad) left = Math.max(pad, vw - pad - rect.width);
+    if (top + rect.height > vh - pad) top = Math.max(pad, vh - pad - rect.height);
+    const next = { left, top };
+    setPos(
+      (prev) => prev.left === next.left && prev.top === next.top ? prev : next
+    );
+  }, [x, y]);
   useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -3733,12 +4363,12 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
         "fixed z-50 w-48 rounded-lg border border-border bg-popover py-1 shadow-xl text-popover-foreground",
         className
       ),
-      style: { left: x, top: y },
+      style: { left: pos.left, top: pos.top },
       onContextMenu: (e) => e.preventDefault(),
       children: items.map((item) => {
         const Icon2 = item.icon;
         const hasSub = !!item.submenu?.length;
-        return /* @__PURE__ */ jsxs(React32__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React38__default.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/60" }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -4129,7 +4759,7 @@ function FloatingSelectSegment({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { side: "top", align: "center", className: "max-h-72 overflow-y-auto", children: action.options.map((o) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(DropdownMenuContent, { side: "top", align: "center", className: "max-h-72 najm-overlay-scroll-y", children: action.options.map((o) => /* @__PURE__ */ jsx(
       DropdownMenuItem,
       {
         onSelect: () => void onAction(action.id, o.value),
@@ -4541,29 +5171,62 @@ function UploaderRow({ item, onCancel, onRemove }) {
     }
   );
 }
+var NO_SHADE = /* @__PURE__ */ new Set(["black", "white"]);
+var PRESETS = {
+  muted: "border-muted-foreground",
+  primary: "border-primary",
+  accent: "border-accent",
+  success: "border-green-600",
+  warning: "border-amber-600",
+  destructive: "border-red-600"
+};
 var inputVariants = cva(
-  "relative w-full flex items-center border dark:bg-input/30 overflow-hidden bg-none",
+  "relative w-full flex items-center h-10 bg-card overflow-hidden transition-colors",
   {
     variants: {
       variant: {
         default: "p-2 rounded-md",
         rounded: "p-2 rounded-full",
-        ghost: "border-none p-0! !bg-transparent !bg-none"
+        ghost: "p-0! !bg-transparent !bg-none"
       },
       status: {
-        default: "border-muted-foreground/20",
-        error: "border-2 border-red-500"
+        default: "",
+        error: ""
       },
       hasIcon: { true: "pl-8", false: "pl-3" },
       disabled: { true: "cursor-not-allowed", false: "" }
     },
-    defaultVariants: { variant: "default", status: "default", hasIcon: false, disabled: false },
-    compoundVariants: [
-      { variant: ["default", "rounded"], disabled: false, class: "hover:border-primary dark:hover:bg-input/50" }
-    ]
+    defaultVariants: { variant: "default", status: "default", hasIcon: false, disabled: false }
+  }
+);
+var BORDER_INTERACTIVE = "border hover:border-primary focus-within:border-primary";
+var ERROR_BORDER = "border !border-red-600";
+var BaseInput = React38__default.forwardRef(
+  ({ children, variant = "default", status = "default", bordered = false, borderColor, className, disabled = false, onHover, onClick, hasIcon, ...rest }, ref) => {
+    const isGhost = variant === "ghost";
+    const isError = status === "error";
+    const effectiveBorderColor = borderColor ?? (bordered ? "muted" : void 0);
+    const showBorder = !isGhost && (!!effectiveBorderColor || isError);
+    const colorClass = effectiveBorderColor ? PRESETS[effectiveBorderColor] ?? (NO_SHADE.has(effectiveBorderColor) ? `border-${effectiveBorderColor}` : `border-${effectiveBorderColor}-600`) : "";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          inputVariants({ variant, status, hasIcon, disabled }),
+          showBorder && (isError ? ERROR_BORDER : BORDER_INTERACTIVE),
+          showBorder && colorClass,
+          className
+        ),
+        onMouseEnter: disabled ? void 0 : onHover,
+        onClick: disabled ? void 0 : onClick,
+        ...rest,
+        children
+      }
+    );
   }
 );
-var BaseInput = ({ children, variant = "default", status = "default", hasIcon = false, className = "", disabled = false, onHover, onClick }) => /* @__PURE__ */ jsx("div", { className: cn(inputVariants({ variant, status, hasIcon, disabled }), className), onMouseEnter: disabled ? void 0 : onHover, onClick: disabled ? void 0 : onClick, children });
+BaseInput.displayName = "BaseInput";
 function getIconColorProps(iconColor, baseClassName = "") {
   if (!iconColor) return { className: cn(baseClassName, "text-muted-foreground"), style: {} };
   if (iconColor.startsWith("text-")) return { className: cn(baseClassName, iconColor), style: {} };
@@ -4571,40 +5234,35 @@ function getIconColorProps(iconColor, baseClassName = "") {
 }
 function resolveIcon(icon) {
   if (!icon) return null;
-  if (typeof icon === "string") {
-    return React32__default.createElement("span", { className: "text-xs font-medium" }, icon.charAt(0).toUpperCase());
-  }
-  if (React32__default.isValidElement(icon)) return icon;
-  if (typeof icon === "function") return React32__default.createElement(icon, { className: "h-4 w-4" });
-  return icon;
+  return /* @__PURE__ */ jsx(NIcon, { icon, size: 16 });
 }
-var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", disabled = false, ...props }) => {
+var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor, disabled = false, ...props }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9 gap-2", className), disabled, children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
     /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground", disabled, ...props })
   ] });
 };
-var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default" }) => {
+var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9 gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
     /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" })
   ] });
 };
-var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default" }) => {
+var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor }) => {
   const [showPassword, setShowPassword] = useState(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9 gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
     /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" }),
     showPassword ? /* @__PURE__ */ jsx(Eye, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(false) }) : /* @__PURE__ */ jsx(EyeOff, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(true) })
   ] });
 };
-var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
+var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered = false, borderColor, rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
   Textarea,
   {
     rows,
@@ -4621,18 +5279,33 @@ function renderItems(items) {
     return /* @__PURE__ */ jsx(SelectItem, { value, children: label }, value);
   });
 }
-var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", disabled = false }) => {
+var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered = false, borderColor, disabled = false }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon && !value;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9 gap-2", className), children: [
-    shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+  const displayLabel = value ? (() => {
+    const found = items.find((i) => typeof i === "string" ? i === value : i.value === value);
+    return typeof found === "string" ? found : found?.label ?? value;
+  })() : "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: "pointer-events-none", children: [
+      shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+      /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+    ] }),
     /* @__PURE__ */ jsxs(Select, { onValueChange: onChange, value: String(value || ""), disabled, children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full cursor-pointer border-0 shadow-none focus-visible:ring-0 dark:bg-transparent text-muted-foreground gap-2 p-0 bg-transparent dark:hover:bg-transparent", style: { border: "none", boxShadow: "none" }, disabled, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
-      /* @__PURE__ */ jsx(SelectContent, { className: "max-h-[300px] w-full overflow-y-auto", children: renderItems(items) })
+      /* @__PURE__ */ jsx(
+        SelectTrigger,
+        {
+          className: "absolute inset-0 w-full h-full opacity-0",
+          disabled,
+          "aria-label": placeholder || "Select"
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectContent, { children: renderItems(items) })
     ] }, String(value))
   ] });
 };
-var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", disabled = false, allowFreeText = false }) => {
+var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered = false, borderColor, disabled = false, allowFreeText = false }) => {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const normalizedItems = items.map((item) => typeof item === "string" ? { value: item, label: item } : item);
@@ -4648,52 +5321,50 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     setOpen(false);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9", className), children: [
-    shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (o) => {
-      setOpen(o);
-      if (!o) setQuery("");
-    }, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", role: "combobox", "aria-expanded": open, className: cn("w-full justify-between h-auto font-normal hover:bg-transparent border-0 shadow-none focus-visible:ring-0", !displayLabel && "text-muted-foreground"), disabled, children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel || placeholder }),
-        /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
-      ] }) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-        /* @__PURE__ */ jsx(
-          CommandInput,
-          {
-            placeholder: searchPlaceholder,
-            className: "h-9",
-            value: query,
-            onValueChange: setQuery,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && showFreeTextOption) {
-                e.preventDefault();
-                commit(trimmedQuery);
-              }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (o) => {
+    setOpen(o);
+    if (!o) setQuery("");
+  }, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("cursor-pointer", className), children: [
+      shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+      /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
+      /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(
+        CommandInput,
+        {
+          placeholder: searchPlaceholder,
+          className: "h-9",
+          value: query,
+          onValueChange: setQuery,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && showFreeTextOption) {
+              e.preventDefault();
+              commit(trimmedQuery);
             }
           }
-        ),
-        /* @__PURE__ */ jsxs(CommandList, { children: [
-          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-          /* @__PURE__ */ jsxs(CommandGroup, { children: [
-            showFreeTextOption && /* @__PURE__ */ jsxs(CommandItem, { value: trimmedQuery, onSelect: () => commit(trimmedQuery), className: "cursor-pointer", children: [
-              /* @__PURE__ */ jsx(Check, { className: "mr-2 h-4 w-4 opacity-0" }),
-              'Use "',
-              trimmedQuery,
-              '"'
-            ] }, "__free_text__"),
-            normalizedItems.map((item) => /* @__PURE__ */ jsxs(CommandItem, { value: item.label, keywords: [item.value, item.label], onSelect: () => commit(value === item.value ? "" : item.value), className: "cursor-pointer", children: [
-              /* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === item.value ? "opacity-100" : "opacity-0") }),
-              item.label
-            ] }, item.value))
-          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+        /* @__PURE__ */ jsxs(CommandGroup, { children: [
+          showFreeTextOption && /* @__PURE__ */ jsxs(CommandItem, { value: trimmedQuery, onSelect: () => commit(trimmedQuery), className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(Check, { className: "mr-2 h-4 w-4 opacity-0" }),
+            'Use "',
+            trimmedQuery,
+            '"'
+          ] }, "__free_text__"),
+          normalizedItems.map((item) => /* @__PURE__ */ jsxs(CommandItem, { value: item.label, keywords: [item.value, item.label], onSelect: () => commit(value === item.value ? "" : item.value), className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === item.value ? "opacity-100" : "opacity-0") }),
+            item.label
+          ] }, item.value))
         ] })
-      ] }) })
-    ] })
+      ] })
+    ] }) })
   ] });
 };
-var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
+var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered = false, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
   const [open, setOpen] = useState(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
@@ -4706,44 +5377,42 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
   };
   const displayedItems = value.slice(0, maxDisplay);
   const remainingCount = value.length - maxDisplay;
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9 gap-2", className), children: [
-    shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full flex items-center justify-between cursor-pointer h-full", disabled && "cursor-not-allowed opacity-50"), children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-1 overflow-hidden", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          displayedItems.map((itemValue) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5 gap-1", children: [
-            getItemLabel(itemValue),
-            !disabled && /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
-              e.stopPropagation();
-              onChange(value.filter((v) => v !== itemValue));
-            }, className: "ml-1 hover:text-destructive", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
-          ] }, itemValue)),
-          remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5", children: [
-            "+",
-            remainingCount,
-            " more"
-          ] })
-        ] }) }),
-        open ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" })
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2 cursor-pointer", className, disabled && "cursor-not-allowed opacity-50"), children: [
+      shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-1 overflow-hidden", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        displayedItems.map((itemValue) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5 gap-1", children: [
+          getItemLabel(itemValue),
+          !disabled && /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            onChange(value.filter((v) => v !== itemValue));
+          }, className: "ml-1 hover:text-destructive", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        ] }, itemValue)),
+        remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5", children: [
+          "+",
+          remainingCount,
+          " more"
+        ] })
       ] }) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-        showSearch && /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, className: "h-9" }),
-        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-        /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] overflow-y-auto", children: items.map((item) => {
-          const itemValue = typeof item === "string" ? item : item.value;
-          const itemLabel = typeof item === "string" ? item : item.label;
-          const isSelected = value.includes(itemValue);
-          return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(itemValue), className: "flex items-center gap-2 cursor-pointer", children: [
-            /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleSelect(itemValue), className: "pointer-events-none" }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1", children: itemLabel })
-          ] }, itemValue);
-        }) })
-      ] }) })
-    ] })
+      open ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      showSearch && /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, className: "h-9" }),
+      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+      /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] najm-overlay-scroll-y", children: items.map((item) => {
+        const itemValue = typeof item === "string" ? item : item.value;
+        const itemLabel = typeof item === "string" ? item : item.label;
+        const isSelected = value.includes(itemValue);
+        return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(itemValue), className: "flex items-center gap-2 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleSelect(itemValue), className: "pointer-events-none" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: itemLabel })
+        ] }, itemValue);
+      }) })
+    ] }) })
   ] });
 };
 var layoutVariants = cva("flex items-start", { variants: { layout: { column: "flex-col gap-4", row: "flex-row gap-7" } }, defaultVariants: { layout: "row" } });
-var RadioGroupInput = ({ value, onChange, className = "", variant = "default", status = "default", layout = "row", items }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, className, children: /* @__PURE__ */ jsx(RadioGroup2, { onValueChange: onChange, value, className: layoutVariants({ layout }), children: items.map((item) => {
+var RadioGroupInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered = false, borderColor, layout = "row", items }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className, children: /* @__PURE__ */ jsx(RadioGroup2, { onValueChange: onChange, value, className: layoutVariants({ layout }), children: items.map((item) => {
   const itemValue = typeof item === "string" ? item : item.value;
   const itemLabel = typeof item === "string" ? item : item.label;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-y-0", children: [
@@ -4751,7 +5420,7 @@ var RadioGroupInput = ({ value, onChange, className = "", variant = "default", s
     /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal peer-disabled:opacity-70 ml-1", children: itemLabel })
   ] }, itemValue);
 }) }) });
-var CheckboxInput = ({ value, onChange, helper, label, checkboxClassName, className, variant = "default", status = "default" }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("flex gap-2 items-center h-9", className), children: [
+var CheckboxInput = ({ value, onChange, helper, label, checkboxClassName, className, variant = "default", status = "default", bordered = false, borderColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex gap-2 items-center", className), children: [
   /* @__PURE__ */ jsx(Checkbox, { checked: value, onCheckedChange: onChange, className: cn("cursor-pointer transition-colors duration-200 border-primary", checkboxClassName) }),
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsx(Label, { className: "cursor-pointer text-muted-foreground", onClick: () => onChange(!value), children: label }),
@@ -4775,13 +5444,15 @@ function CheckboxGroupInput({
   className,
   variant = "default",
   status = "default",
+  bordered = false,
+  borderColor,
   disabled = false
 }) {
   const handleChange = (itemValue, checked) => {
     const next = checked ? [...value, itemValue] : value.filter((v) => v !== itemValue);
     onChange(next);
   };
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, className: cn("flex-wrap", className), disabled, children: /* @__PURE__ */ jsx("div", { className: cn(layoutVariants2({ layout })), children: items.map((item) => {
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("flex-wrap", className), disabled, children: /* @__PURE__ */ jsx("div", { className: cn(layoutVariants2({ layout })), children: items.map((item) => {
     const itemValue = typeof item === "string" ? item : item.value;
     const itemLabel = typeof item === "string" ? item : item.label;
     const checked = value.includes(itemValue);
@@ -4798,7 +5469,7 @@ function CheckboxGroupInput({
     ] }, itemValue);
   }) }) });
 }
-var SwitchInput = ({ value, onChange, label = "", helper, className = "", variant = "default", status = "default", icon, showIcon = true, iconPosition = "label", iconColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("gap-2 justify-between items-center", className), children: [
+var SwitchInput = ({ value, onChange, label = "", helper, className = "", variant = "default", status = "default", bordered = false, borderColor, icon, showIcon = true, iconPosition = "label", iconColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2 justify-between items-center", className), children: [
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs(Label, { className: "flex items-center gap-2", children: [
       iconPosition === "label" && icon && showIcon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", children: resolveIcon(icon) }),
@@ -4811,10 +5482,10 @@ var SwitchInput = ({ value, onChange, label = "", helper, className = "", varian
     /* @__PURE__ */ jsx(Switch, { checked: value, onCheckedChange: onChange })
   ] })
 ] });
-var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default" }) => {
+var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered = false, borderColor }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const toDateString = (date) => date?.toISOString().split("T")[0];
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("h-9", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", !value && "text-foreground"), children: /* @__PURE__ */ jsx(Label, { className: "text-muted-foreground cursor-pointer", children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: typeof value === "string" ? new Date(value) : value, onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
@@ -4829,7 +5500,7 @@ function truncateFilename(filename, maxLength = 25) {
   const name = extIndex !== -1 ? filename.slice(0, extIndex) : filename;
   return `${name.slice(0, maxLength - ext.length - 3)}...${ext}`;
 }
-var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default" }) => {
+var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor }) => {
   const fileInputRef = useRef(null);
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const displayFilename = () => {
@@ -4837,7 +5508,7 @@ var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIc
     const filename = typeof value === "string" ? value.split(/[\\/]/).pop() || "" : value.name;
     return truncateFilename(filename);
   };
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, className: cn("flex h-9 px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
     /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, onChange: (e) => onChange(e.target.files?.[0] || null), className: "hidden" }),
     /* @__PURE__ */ jsxs("div", { className: "bg-muted flex h-full items-center px-3", children: [
       showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(FileUp, { className: cn(iconProps.className) })),
@@ -4966,14 +5637,14 @@ function ImageInput({
     renderFileInput()
   ] });
 }
-var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default" }) => {
+var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default", bordered = false, borderColor }) => {
   const stars = Array.from({ length: maxStars }, (_, i) => /* @__PURE__ */ jsx(Star, { onClick: () => onChange(i + 1), className: cn("cursor-pointer h-8 w-8", i < value ? "fill-orange-400 text-orange-400" : "fill-[#d6d6d6] text-[#d6d6d6]") }, i));
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, className: cn("gap-2", className), children: stars });
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: stars });
 };
 var DEFAULT_COLORS = ["#222222", "#e11d48", "#ea580c", "#16a34a", "#db2777", "#2563eb", "#9333ea", "#eab308"];
-var ColorArrayInput = ({ value, onChange, className = "", variant = "default", status = "default", colors = DEFAULT_COLORS }) => {
+var ColorArrayInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered = false, borderColor, colors = DEFAULT_COLORS }) => {
   const [selectedColor, setSelectedColor] = useState(value || "");
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, className: cn("flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx("div", { className: cn("flex h-9 w-9 items-center justify-center cursor-pointer rounded-full transition-transform hover:scale-105", selectedColor === color && "ring-2 ring-offset-2"), onClick: () => {
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx("div", { className: cn("flex h-9 w-9 items-center justify-center cursor-pointer rounded-full transition-transform hover:scale-105", selectedColor === color && "ring-2 ring-offset-2"), onClick: () => {
     setSelectedColor(color);
     onChange(color);
   }, children: /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full", style: { backgroundColor: color }, children: selectedColor === color && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-white" }) }) }, color)) });
@@ -5007,6 +5678,8 @@ function ColorPickerInput({
   className,
   variant = "default",
   status = "default",
+  bordered = false,
+  borderColor,
   disabled = false
 }) {
   const inputRef = useRef(null);
@@ -5015,6 +5688,8 @@ function ColorPickerInput({
     {
       variant,
       status,
+      bordered,
+      borderColor,
       className: cn("flex-col gap-3 items-start p-3", className),
       disabled,
       onClick: () => inputRef.current?.click(),
@@ -5101,6 +5776,8 @@ function EmojiInput({
   className,
   variant = "default",
   status = "default",
+  bordered = false,
+  borderColor,
   disabled = false
 }) {
   return /* @__PURE__ */ jsx(
@@ -5108,6 +5785,8 @@ function EmojiInput({
     {
       variant,
       status,
+      bordered,
+      borderColor,
       className: cn("gap-3 flex-wrap", className),
       disabled,
       children: options.map((opt) => /* @__PURE__ */ jsxs(
@@ -5176,7 +5855,9 @@ function PhoneInput({
   disabled = false,
   className,
   variant = "default",
-  status = "default"
+  status = "default",
+  bordered = false,
+  borderColor
 }) {
   const phoneThemeVars = {
     "--react-international-phone-height": "40px",
@@ -5200,7 +5881,7 @@ function PhoneInput({
     "--react-international-phone-dropdown-preferred-list-divider-color": "hsl(var(--najm-border))",
     "--react-international-phone-dropdown-shadow": "0 16px 40px hsl(var(--najm-background) / 0.45)"
   };
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, className: cn("h-10 gap-0 overflow-visible p-0!", className), disabled, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-0 overflow-visible p-0!", className), disabled, children: /* @__PURE__ */ jsx(
     PhoneInput$1,
     {
       className: "w-full",
@@ -5260,7 +5941,7 @@ function PhoneInput({
     }
   ) });
 }
-var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", format24 = true, showSeconds = false, disabled = false }) => {
+var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor, format24 = true, showSeconds = false, disabled = false }) => {
   const [inputValue, setInputValue] = useState(value);
   const [isValid, setIsValid] = useState(true);
   useEffect(() => {
@@ -5308,44 +5989,210 @@ var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true
   };
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const currentStatus = !isValid ? "error" : status;
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status: currentStatus, className: cn("h-9 gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status: currentStatus, bordered, borderColor, className: cn("gap-2", className), children: [
     showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(Clock, { className: iconProps.className, style: iconProps.style })),
     /* @__PURE__ */ jsx(Input, { type: "text", placeholder: placeholder || (showSeconds ? "HH:MM:SS" : "HH:MM"), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onKeyDown: (e) => {
       if (!/\d/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) e.preventDefault();
     }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0", !isValid ? "text-red-500" : "text-muted-foreground") })
   ] });
 };
-function Slider({ value, onValueChange, min = 0, max = 100, step = 1, className, disabled }) {
-  const percentage = (value[0] - min) / (max - min) * 100;
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full touch-none select-none items-center h-5", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute h-full bg-brand rounded-full",
-        style: { width: `${percentage}%` }
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute h-5 w-5 rounded-full bg-brand border-2 border-bg shadow-md pointer-events-none transition-transform",
-        style: { left: `calc(${percentage}% - 10px)` }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "range",
-        min,
-        max,
-        step,
-        value: value[0],
-        onChange: (e) => onValueChange([Number(e.target.value)]),
-        disabled,
-        className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+var RANGE_COLOR = {
+  default: "bg-primary",
+  secondary: "bg-secondary",
+  destructive: "bg-destructive",
+  accent: "bg-accent",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  info: "bg-sky-500"
+};
+var THUMB_COLOR = {
+  default: "border-primary",
+  secondary: "border-secondary",
+  destructive: "border-destructive",
+  accent: "border-accent",
+  success: "border-emerald-500",
+  warning: "border-amber-500",
+  info: "border-sky-500"
+};
+var TRACK_SIZE = {
+  sm: { horizontal: "h-1", vertical: "w-1" },
+  md: { horizontal: "h-1.5", vertical: "w-1.5" },
+  lg: { horizontal: "h-2", vertical: "w-2" }
+};
+var THUMB_SIZE = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+var sliderVariants = cva(
+  "relative flex touch-none select-none",
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      orientation: {
+        horizontal: "w-full items-center",
+        vertical: "h-full flex-col"
       }
-    )
-  ] });
+    },
+    defaultVariants: {
+      size: "md",
+      orientation: "horizontal"
+    }
+  }
+);
+function NSlider({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  variant = "default",
+  size = "md",
+  orientation = "horizontal",
+  disabled = false,
+  showTooltip = false,
+  formatTooltip,
+  dir,
+  name,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+}) {
+  const isRangeMode = (v) => {
+    if (v === void 0) return false;
+    return Array.isArray(v) && v.length === 2;
+  };
+  const rangeMode = isRangeMode(controlledValue ?? defaultValue);
+  const toRadix = (v) => {
+    if (v === void 0) return rangeMode ? [min, max] : [min];
+    return Array.isArray(v) ? [...v] : [v];
+  };
+  const initialRadix = toRadix(controlledValue ?? defaultValue);
+  const [internalValues, setInternalValues] = React38.useState(initialRadix);
+  const [active, setActive] = React38.useState(null);
+  const currentValues = controlledValue !== void 0 ? toRadix(controlledValue) : internalValues;
+  const handleRadix = (arr) => {
+    setInternalValues(arr);
+    if (onValueChange) {
+      onValueChange(rangeMode ? [arr[0], arr[1]] : arr[0]);
+    }
+  };
+  const radixValue = controlledValue !== void 0 ? toRadix(controlledValue) : void 0;
+  const radixDefault = controlledValue === void 0 ? toRadix(defaultValue) : void 0;
+  const fmt = formatTooltip ?? ((n) => String(Math.round(n)));
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      "data-disabled": disabled ? "" : void 0,
+      value: radixValue,
+      defaultValue: radixDefault,
+      onValueChange: handleRadix,
+      min,
+      max,
+      step,
+      orientation,
+      dir,
+      disabled,
+      className: cn(sliderVariants({ size, orientation }), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "relative grow rounded-full bg-muted",
+              TRACK_SIZE[size][orientation]
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn("absolute rounded-full", RANGE_COLOR[variant])
+              }
+            )
+          }
+        ),
+        currentValues.map((v, i) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            onFocus: () => setActive(i),
+            onBlur: () => setActive(null),
+            onPointerDown: () => setActive(i),
+            onPointerUp: () => setActive(null),
+            className: cn(
+              "block rounded-full bg-background border-2 shadow outline-none",
+              "focus-visible:ring-2 focus-visible:ring-ring/50",
+              "disabled:pointer-events-none",
+              THUMB_SIZE[size],
+              THUMB_COLOR[variant]
+            ),
+            children: showTooltip && active === i && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "slider-tooltip",
+                className: cn(
+                  "absolute left-1/2 -translate-x-1/2 -top-7",
+                  "rounded bg-popover px-1.5 py-0.5 text-xs text-popover-foreground shadow-md",
+                  "pointer-events-none select-none whitespace-nowrap"
+                ),
+                children: fmt(v)
+              }
+            )
+          },
+          i
+        )),
+        name && currentValues.map((v, i) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            name: i === 0 ? name : `${name}-${i}`,
+            value: v
+          },
+          `hidden-${i}`
+        ))
+      ]
+    }
+  );
+}
+NSlider.displayName = "NSlider";
+function Slider({ value, onValueChange, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    NSlider,
+    {
+      ...rest,
+      value: value.length === 2 ? [value[0], value[1]] : value[0],
+      onValueChange: (v) => onValueChange(Array.isArray(v) ? [...v] : [v])
+    }
+  );
+}
+function SliderInput({
+  value,
+  onChange,
+  status: _status,
+  icon: _icon,
+  iconColor: _iconColor,
+  readOnly: _readOnly,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    NSlider,
+    {
+      ...rest,
+      value: typeof value === "number" ? value : 0,
+      onValueChange: (v) => onChange?.(Array.isArray(v) ? v[0] : v)
+    }
+  );
 }
 function SearchField({ value, onChange, placeholder = "Search...", className }) {
   return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
@@ -5356,7 +6203,7 @@ function SearchField({ value, onChange, placeholder = "Search...", className })
         placeholder,
         value,
         onChange: (e) => onChange(e.target.value),
-        className: "pl-9 text-sm bg-card"
+        className: "pl-9 text-sm"
       }
     )
   ] });
@@ -5418,19 +6265,19 @@ function Combobox({
   allowFreeText = false,
   disabled = false
 }) {
-  const [open, setOpen] = React32.useState(false);
-  const [query, setQuery] = React32.useState("");
-  const [highlight, setHighlight] = React32.useState(0);
-  const wrapperRef = React32.useRef(null);
-  const inputRef = React32.useRef(null);
-  const filtered = React32.useMemo(() => {
+  const [open, setOpen] = React38.useState(false);
+  const [query, setQuery] = React38.useState("");
+  const [highlight, setHighlight] = React38.useState(0);
+  const wrapperRef = React38.useRef(null);
+  const inputRef = React38.useRef(null);
+  const filtered = React38.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
       (opt) => opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q)
     );
   }, [options, query]);
-  React32.useEffect(() => {
+  React38.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -5441,7 +6288,7 @@ function Combobox({
     document.addEventListener("mousedown", onClick);
     return () => document.removeEventListener("mousedown", onClick);
   }, [open]);
-  React32.useEffect(() => {
+  React38.useEffect(() => {
     if (open) {
       setHighlight(0);
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -5449,7 +6296,7 @@ function Combobox({
       setQuery("");
     }
   }, [open]);
-  const selectedLabel = React32.useMemo(() => {
+  const selectedLabel = React38.useMemo(() => {
     const match = options.find((o) => o.value === value);
     return match?.label ?? value;
   }, [options, value]);
@@ -5526,7 +6373,7 @@ function Combobox({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: allowFreeText && query.trim() ? `Press Enter to use "${query.trim()}"` : emptyText }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: "max-h-64 najm-overlay-scroll-y py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: allowFreeText && query.trim() ? `Press Enter to use "${query.trim()}"` : emptyText }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -5570,11 +6417,12 @@ var VARIANT_PRESETS = {
     error: "text-xs"
   }
 };
-var VariantContext = createContext("default");
-var VariantProvider = ({ variant = "default", children }) => /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children });
-var useVariant = () => useContext(VariantContext);
-var useVariantPreset = () => VARIANT_PRESETS[useContext(VariantContext)];
-function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", as = "form", className = "", id, devTools, children }) {
+var VariantContext = createContext({ variant: "default", bordered: false });
+var VariantProvider = ({ variant = "default", bordered = false, children }) => /* @__PURE__ */ jsx(VariantContext.Provider, { value: { variant, bordered }, children });
+var useVariant = () => useContext(VariantContext).variant;
+var useBordered = () => useContext(VariantContext).bordered;
+var useVariantPreset = () => VARIANT_PRESETS[useContext(VariantContext).variant];
+function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", bordered = false, as = "form", className = "", id, devTools, children }) {
   const resolver = useMemo(() => schema ? zodResolver(schema) : void 0, [schema]);
   const internalForm = useForm({
     resolver,
@@ -5606,7 +6454,7 @@ function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, varia
   }, [form.formState.errors]);
   const wrapperClass = cn("flex flex-col h-full w-full gap-2", className);
   const submit = form.handleSubmit(onSubmit);
-  const inner = /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, children: as === "form" ? /* @__PURE__ */ jsx("form", { id, onSubmit: submit, className: wrapperClass, autoComplete: "off", children }) : /* @__PURE__ */ jsx("div", { id, className: wrapperClass, onKeyDown: (e) => {
+  const inner = /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, children: as === "form" ? /* @__PURE__ */ jsx("form", { id, onSubmit: submit, className: wrapperClass, autoComplete: "off", children }) : /* @__PURE__ */ jsx("div", { id, className: wrapperClass, onKeyDown: (e) => {
     if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") {
       e.preventDefault();
       void submit();
@@ -5659,7 +6507,8 @@ var Inputs = {
   emoji: EmojiInput,
   lang: LangInput,
   phone: PhoneInput,
-  time: TimeInput
+  time: TimeInput,
+  slider: SliderInput
 };
 var FormInput = ({ name, type, formLabel, formDescription, required = false, disabled = false, readOnly = false, hidden = false, icon, iconColor, classNames, ...rest }) => {
   const InputComponent = Inputs[type];
@@ -5667,12 +6516,13 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
   const { className, onChange: consumerOnChange, ...inputRest } = rest;
   const prefix = usePrefix();
   const preset = useVariantPreset();
+  const contextBordered = useBordered();
   const fieldName = prefix ? `${prefix}.${name}` : name;
   if (!InputComponent) return null;
   const getDefaultValue = () => {
     if (type === "multiselect" || type === "checkboxGroup") return [];
     if (type === "switch" || type === "checkbox") return false;
-    if (type === "starRating" || type === "emoji") return 0;
+    if (type === "starRating" || type === "emoji" || type === "slider") return 0;
     if (type === "image" || type === "file") return null;
     return "";
   };
@@ -5693,11 +6543,11 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
     };
     return /* @__PURE__ */ jsxs(FormItem, { className: slot.item, children: [
       formLabel && /* @__PURE__ */ jsxs(FormLabel, { className: slot.label, children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", children: icon }),
+        icon && /* @__PURE__ */ jsx(NIcon, { icon, size: 16, className: "shrink-0 text-muted-foreground" }),
         formLabel,
         required && !disabled && !readOnly && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, className: slot.input }) }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, className: slot.input }) }),
       !hasError && !disabled && !readOnly && formDescription && /* @__PURE__ */ jsx(FormDescription, { className: slot.description, children: formDescription }),
       !isHidden && /* @__PURE__ */ jsx(FormMessage, { className: slot.error })
     ] });
@@ -5843,7 +6693,7 @@ function StepsProgress({ steps, currentStep, className }) {
       className: cn("absolute h-0.5 mb-3 top-4", className),
       style: { left: `${firstStepCenter}%`, width: `${lineWidth}%` },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted rounded-full" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted-foreground/30 rounded-full" }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -6026,6 +6876,8 @@ function WizardForm({
   nextLabel = "Next",
   previousLabel = "Previous",
   submitLabel = "Submit",
+  variant = "default",
+  bordered = false,
   className,
   classNames,
   footerSlot
@@ -6068,38 +6920,46 @@ function WizardForm({
     onStepComplete?.(nav.currentStep - 1, data);
     await handleStepSubmit(data);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-4", classNames?.root, className), children: [
-    showHeader && /* @__PURE__ */ jsx(
-      StepsHeader,
-      {
-        steps: nav.steps,
-        currentStep: nav.currentStep,
-        completedSteps: nav.completedSteps,
-        onStepClick: nav.goToStep,
-        classNames
-      }
-    ),
-    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
-      "form",
-      {
-        id: `step-${currentStepConfig.id}`,
-        onSubmit: form.handleSubmit(handleSubmit),
-        className: cn("flex flex-col gap-4", classNames?.step),
-        autoComplete: "off",
-        children: [
-          currentStepConfig.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: currentStepConfig.description }),
-          currentStepConfig.render({ form, stepIndex: nav.currentStep - 1 })
-        ]
-      }
-    ) }),
-    showFooter && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", classNames?.footer), children: [
-      /* @__PURE__ */ jsx("div", { children: !nav.isFirstStep && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: nav.handlePrevious, children: previousLabel }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        footerSlot,
-        nav.isLastStep ? /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: submitLabel }) : /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: nextLabel })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-najm-wizard-form": "true",
+      "data-najm-dialog-actions": "content",
+      className: cn("flex w-full flex-col gap-4", classNames?.root, className),
+      children: [
+        showHeader && /* @__PURE__ */ jsx(
+          StepsHeader,
+          {
+            steps: nav.steps,
+            currentStep: nav.currentStep,
+            completedSteps: nav.completedSteps,
+            onStepClick: nav.goToStep,
+            classNames
+          }
+        ),
+        /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            id: `step-${currentStepConfig.id}`,
+            onSubmit: form.handleSubmit(handleSubmit),
+            className: cn("flex flex-col gap-4", classNames?.step),
+            autoComplete: "off",
+            children: [
+              currentStepConfig.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: currentStepConfig.description }),
+              currentStepConfig.render({ form, stepIndex: nav.currentStep - 1 })
+            ]
+          }
+        ) }) }),
+        showFooter && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", classNames?.footer), children: [
+          /* @__PURE__ */ jsx("div", { children: !nav.isFirstStep && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: nav.handlePrevious, children: previousLabel }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            footerSlot,
+            nav.isLastStep ? /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: submitLabel }) : /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: nextLabel })
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 var TableStoreContext = createContext(null);
 var useTableStore = { use: {} };
@@ -6111,15 +6971,35 @@ var handler = {
   }
 };
 useTableStore.use = new Proxy({}, handler);
-function TableActionCell({ row, onView, onEdit, onDelete }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", onClick: (e) => e.stopPropagation(), children: [
+var actionButtonClass = (bordered, danger) => cn(
+  "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
+  danger ? "hover:bg-red-500/10 hover:text-red-400" : "hover:bg-muted hover:text-foreground",
+  bordered && "border border-muted-foreground"
+);
+function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }) {
+  if (menuButton && openRowMenu) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Row actions",
+        onClick: (e) => {
+          e.stopPropagation();
+          openRowMenu(e, row.original);
+        },
+        className: actionButtonClass(false),
+        children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-start gap-1", onClick: (e) => e.stopPropagation(), children: [
     onView && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": "View",
         onClick: () => onView(row.original),
-        className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        className: actionButtonClass(bordered),
         children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
       }
     ),
@@ -6129,7 +7009,7 @@ function TableActionCell({ row, onView, onEdit, onDelete }) {
         type: "button",
         "aria-label": "Edit",
         onClick: () => onEdit(row.original),
-        className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        className: actionButtonClass(bordered),
         children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
       }
     ),
@@ -6139,7 +7019,7 @@ function TableActionCell({ row, onView, onEdit, onDelete }) {
         type: "button",
         "aria-label": "Delete",
         onClick: () => onDelete(row.original),
-        className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-red-500/10 hover:text-red-400",
+        className: actionButtonClass(bordered, true),
         children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
       }
     )
@@ -6154,10 +7034,12 @@ var computeFlags = (state) => {
   const isJsonView = state.viewMode === "json";
   const isFilesView = state.viewMode === "files";
   const isCustomMode = !["table", "cards", "json"].includes(state.viewMode ?? "");
-  const hasActions = Boolean(state.onView || state.onEdit || state.onDelete);
+  const hasActions = Boolean(
+    state.menuButton && state.openRowMenu || state.onView || state.onEdit || state.onDelete
+  );
   const hasControls = Boolean(state.showColumnVisibility || state.showAddButton || state.showViewToggle);
   const showContent = !state.isLoading && !state.error && !hasNoData && !isFilteredEmpty;
-  return { hasData, hasNoData, isTableView, isCardView, isJsonView, isFilesView, isCustomMode, hasActions, hasControls, showContent, showPagination: state.showPagination && isTableView && showContent };
+  return { hasData, hasNoData, isTableView, isCardView, isJsonView, isFilesView, isCustomMode, hasActions, hasControls, showContent, showPagination: state.showPagination && showContent };
 };
 var createSelectors = (_store) => {
   const store = _store;
@@ -6199,6 +7081,9 @@ var createTableStore = () => {
     onAddClick: null,
     onRowClick: null,
     onRowContextMenu: null,
+    onBackgroundContextMenu: null,
+    openRowMenu: null,
+    menuButton: false,
     onCellClick: null,
     onBulkDelete: null,
     onRetry: null,
@@ -6209,7 +7094,9 @@ var createTableStore = () => {
     CardComponent: null,
     className: "",
     classNames: {},
+    bordered: false,
     headerClassName: "bg-card",
+    headerColor: "primary",
     showCheckbox: true,
     selectedRowId: null,
     headerSlot: null,
@@ -6325,7 +7212,8 @@ var createTableStore = () => {
 
 // src/components/table/hooks.ts
 var ROW_HEIGHT = 56;
-var MIN_ROWS = 5;
+var DEFAULT_TABLE_HEADER_HEIGHT = 48;
+var ROOT_SECTION_GAP_COUNT = 2;
 function useStoreSync(props) {
   const storeRef = useRef(null);
   const isControlled = props.mode !== void 0;
@@ -6399,33 +7287,52 @@ function useStoreSync(props) {
   }, [props, isControlled, isPaginationControlled, isRowSelectionControlled, isExpandedControlled, isSortingControlled]);
   return storeRef.current;
 }
+function calculateDynamicPageSize(input) {
+  const rowHeight = input.rowHeight ?? ROW_HEIGHT;
+  const availableRowsHeight = input.bodyHeight - input.tableHeaderHeight;
+  if (availableRowsHeight <= 0) return 1;
+  return Math.max(1, Math.floor(availableRowsHeight / rowHeight));
+}
 function useDynamicPageSize(containerRef) {
   const dynamicHeight = useTableStore.use.dynamicHeight();
   const viewMode = useTableStore.use.viewMode();
   const manualPagination = useTableStore.use.manualPagination();
+  const isLoading = useTableStore.use.isLoading();
+  const error = useTableStore.use.error();
+  const hasNoData = useTableStore.use.hasNoData();
+  const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
   const syncWithProps = useTableStore.use.syncWithProps();
   useLayoutEffect(() => {
     if (!dynamicHeight || !containerRef.current || viewMode !== "table" || manualPagination) return;
     const calculatePageSize = () => {
-      const container = containerRef.current;
-      if (!container) return;
-      const tableHeaderHeight = 40;
-      const tableContentHeaderHeight = 48;
-      const paginationHeight = 36;
-      const gap = 8;
-      const parentHeight = container.parentElement?.clientHeight || container.clientHeight;
-      const availableHeight = parentHeight - tableHeaderHeight - tableContentHeaderHeight - paginationHeight - gap;
-      const calculatedRows = Math.floor(availableHeight / ROW_HEIGHT);
-      const newPageSize = Math.max(calculatedRows, MIN_ROWS);
-      const calculatedMaxHeight = tableContentHeaderHeight + newPageSize * ROW_HEIGHT;
+      const container2 = containerRef.current;
+      if (!container2) return;
+      const bodyEl = container2.querySelector("[data-ntable-body]");
+      const tableHeaderEl = container2.querySelector("[data-ntable-table-header]");
+      let bodyHeight = bodyEl?.clientHeight ?? 0;
+      if (!bodyHeight) {
+        const rootHeight = container2.clientHeight;
+        const headerHeight = container2.querySelector("[data-ntable-header]")?.offsetHeight ?? 0;
+        const paginationHeight = container2.querySelector("[data-ntable-pagination]")?.offsetHeight ?? 0;
+        const rootStyles = window.getComputedStyle(container2);
+        const gap = Number.parseFloat(rootStyles.rowGap || rootStyles.gap || "0") || 0;
+        bodyHeight = rootHeight - headerHeight - paginationHeight - gap * ROOT_SECTION_GAP_COUNT;
+      }
+      const tableHeaderHeight = tableHeaderEl?.offsetHeight ?? DEFAULT_TABLE_HEADER_HEIGHT;
+      const newPageSize = calculateDynamicPageSize({ bodyHeight, tableHeaderHeight });
+      const calculatedMaxHeight = tableHeaderHeight + newPageSize * ROW_HEIGHT;
       syncWithProps({ calculatedPageSize: newPageSize, maxHeight: calculatedMaxHeight });
     };
     calculatePageSize();
     const resizeObserver = new ResizeObserver(calculatePageSize);
-    resizeObserver.observe(containerRef.current);
-    if (containerRef.current.parentElement) resizeObserver.observe(containerRef.current.parentElement);
+    const container = containerRef.current;
+    resizeObserver.observe(container);
+    container.querySelectorAll(
+      "[data-ntable-header], [data-ntable-body], [data-ntable-pagination], [data-ntable-table-header]"
+    ).forEach((el) => resizeObserver.observe(el));
+    if (container.parentElement) resizeObserver.observe(container.parentElement);
     return () => resizeObserver.disconnect();
-  }, [dynamicHeight, viewMode, containerRef, syncWithProps, manualPagination]);
+  }, [dynamicHeight, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, isFilteredEmpty]);
 }
 function useTable() {
   const [sorting, setSorting] = useState([]);
@@ -6438,6 +7345,9 @@ function useTable() {
   const onView = useTableStore.use.onView();
   const onEdit = useTableStore.use.onEdit();
   const onDelete = useTableStore.use.onDelete();
+  const openRowMenu = useTableStore.use.openRowMenu();
+  const menuButton = useTableStore.use.menuButton();
+  const bordered = useTableStore.use.bordered();
   const CardComponent = useTableStore.use.CardComponent();
   const dynamicHeight = useTableStore.use.dynamicHeight();
   const viewMode = useTableStore.use.viewMode();
@@ -6462,19 +7372,20 @@ function useTable() {
   const finalColumns = useMemo(() => {
     const effectiveColumns = columns.length === 0 && CardComponent ? [{ id: "id", accessorKey: "id", header: "ID" }] : columns;
     if (hasActions) {
+      const isMenuActions = Boolean(menuButton && openRowMenu);
       return [
         ...effectiveColumns,
         {
           id: "actions",
-          header: "",
-          cell: ({ row }) => React32__default.createElement(TableActionCell, { row, onView, onEdit, onDelete }),
+          header: () => isMenuActions ? null : React38__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
+          cell: ({ row }) => React38__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
           enableSorting: false,
           enableHiding: false
         }
       ];
     }
     return effectiveColumns;
-  }, [columns, CardComponent, hasActions, onView, onEdit, onDelete]);
+  }, [columns, CardComponent, hasActions, onView, onEdit, onDelete, openRowMenu, menuButton, bordered]);
   const notifyStateChange = useCallback((state) => {
     onStateChange?.(state);
   }, [onStateChange]);
@@ -6563,21 +7474,57 @@ function useTable() {
   }, [calculatedPageSize, dynamicHeight, viewMode, table, data.length, manualPagination]);
   return { table, finalColumns, sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, globalFilter, setGlobalFilter };
 }
-function useTableKeyboard() {
+function useTableKeyboard(options = {}) {
+  const { scopeRef, contextMenuClose, contextMenuOpen } = options;
   const table = useTableStore.use.table();
   const onBulkDelete = useTableStore.use.onBulkDelete();
-  useKeyboard("ctrl+a", () => {
-    if (table?.getRowModel) table.getRowModel().rows.forEach((row) => row.toggleSelected(true));
-  }, { preventDefault: true });
-  useKeyboard("escape", () => {
-    if (table?.toggleAllRowsSelected) table.toggleAllRowsSelected(false);
-  });
-  useKeyboard("delete", () => {
+  useKeyboard(
+    "ctrl+a",
+    () => {
+      table?.toggleAllPageRowsSelected?.(true);
+    },
+    { preventDefault: true, scopeRef }
+  );
+  useKeyboard(
+    "escape",
+    () => {
+      if (contextMenuOpen && contextMenuClose) contextMenuClose();
+      const hasSelection = table?.getIsSomeRowsSelected?.() || table?.getIsAllRowsSelected?.();
+      if (hasSelection) table?.toggleAllRowsSelected?.(false);
+    },
+    { scopeRef }
+  );
+  const fireBulkDelete = () => {
     if (!table?.getSelectedRowModel) return;
     const selectedRows = table.getSelectedRowModel().rows;
-    if (selectedRows.length > 0 && onBulkDelete) onBulkDelete(selectedRows.map((row) => row.original?.id));
-  });
+    if (selectedRows.length > 0 && onBulkDelete) {
+      onBulkDelete(selectedRows.map((row) => row.original?.id));
+    }
+  };
+  useKeyboard("delete", fireBulkDelete, { scopeRef, preventDefault: true });
+  useKeyboard("backspace", fireBulkDelete, { scopeRef, preventDefault: true });
 }
+
+// src/components/table/tableColors.ts
+var HEADER_COLORS = {
+  primary: { bg: "bg-primary/15", text: "[&_th]:text-primary", row: "hover:bg-primary/5" },
+  violet: { bg: "bg-violet-600/20", text: "[&_th]:text-violet-700 dark:[&_th]:text-violet-300", row: "hover:bg-violet-500/5" },
+  blue: { bg: "bg-blue-600/20", text: "[&_th]:text-blue-700   dark:[&_th]:text-blue-300", row: "hover:bg-blue-500/5" },
+  emerald: { bg: "bg-emerald-600/20", text: "[&_th]:text-emerald-700 dark:[&_th]:text-emerald-300", row: "hover:bg-emerald-500/5" },
+  amber: { bg: "bg-amber-500/20", text: "[&_th]:text-amber-700   dark:[&_th]:text-amber-300", row: "hover:bg-amber-500/5" },
+  rose: { bg: "bg-rose-600/20", text: "[&_th]:text-rose-700    dark:[&_th]:text-rose-300", row: "hover:bg-rose-500/5" },
+  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-300", row: "hover:bg-slate-500/5" }
+};
+var HEADER_HEX = {
+  primary: "",
+  violet: "#7c3aed",
+  blue: "#2563eb",
+  emerald: "#059669",
+  amber: "#f59e0b",
+  rose: "#e11d48",
+  slate: "#475569"
+};
+var ROW_CONTEXT_HANDLED = "__ntableRowContextHandled";
 function EditableCell({ cell, onCellEdit }) {
   const columnDef = cell.column.columnDef;
   const meta = columnDef.meta || {};
@@ -6585,10 +7532,10 @@ function EditableCell({ cell, onCellEdit }) {
   const columnId = cell.column.id;
   const editor = meta.editor || "text";
   const initial = cell.getValue();
-  const [editing, setEditing] = React32__default.useState(false);
-  const [value, setValue] = React32__default.useState(initial);
-  const [saving, setSaving] = React32__default.useState(false);
-  React32__default.useEffect(() => {
+  const [editing, setEditing] = React38__default.useState(false);
+  const [value, setValue] = React38__default.useState(initial);
+  const [saving, setSaving] = React38__default.useState(false);
+  React38__default.useEffect(() => {
     if (!editing) setValue(initial);
   }, [initial, editing]);
   const commit = async (next) => {
@@ -6637,20 +7584,31 @@ function NTableContent({ effectiveMode }) {
   const showSorting = useTableStore.use.showSorting();
   const noResultsText = useTableStore.use.noResultsText();
   const headerClassName = useTableStore.use.headerClassName();
+  const headerColor = useTableStore.use.headerColor();
+  const colorStyle = headerColor ? HEADER_COLORS[headerColor] : null;
   const onRowClick = useTableStore.use.onRowClick();
   const onRowContextMenu = useTableStore.use.onRowContextMenu();
+  const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
   const onCellEdit = useTableStore.use.onCellEdit();
-  const dynamicHeight = useTableStore.use.dynamicHeight();
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
+  const bordered = useTableStore.use.bordered();
   const showCheckbox = useTableStore.use.showCheckbox();
   const selectedRowId = useTableStore.use.selectedRowId();
   const renderSubRow = useTableStore.use.renderSubRow();
   const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
   const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
+  const handleBackgroundContextMenu = useCallback((e) => {
+    if (e.nativeEvent[ROW_CONTEXT_HANDLED]) return;
+    const target = e.target;
+    if (target.closest("tr[data-row]")) return;
+    if (onBackgroundContextMenu) {
+      onBackgroundContextMenu(e);
+    }
+  }, [onBackgroundContextMenu]);
   if (isLoading || error || hasNoData || !showContent || !table) return null;
   const isTableView = effectiveMode ? effectiveMode === "table" : storeIsTableView;
   if (!isTableView) return null;
@@ -6660,76 +7618,9 @@ function NTableContent({ effectiveMode }) {
     if (dir === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" });
     return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 opacity-50" });
   };
-  return /* @__PURE__ */ jsx(Card, { className: cn("rounded-md p-0 border border-border/50 bg-transparent shadow-none", dynamicHeight ? "overflow-hidden" : "overflow-auto", classNames?.content), children: dynamicHeight ? /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, dynamicHeight && "sticky top-0 z-10", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
-      showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: "w-10 text-foreground h-12", children: /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          "aria-label": "Select all rows",
-          checked: table.getIsAllPageRowsSelected(),
-          onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
-        }
-      ) }),
-      hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
-      hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { className: "text-foreground h-12", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
-        flexRender(header.column.columnDef.header, header.getContext()),
-        header.column.getCanSort() && showSorting && /* @__PURE__ */ jsx("span", { children: getSortIcon(header.column) })
-      ] }) }, header.id))
-    ] }, hg.id)) }),
-    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
-      const isSelectedByRowId = Boolean(selectedRowId && row.original?.id === selectedRowId);
-      const canExpand = hasExpansion && row.getCanExpand();
-      const isExpanded = canExpand && row.getIsExpanded();
-      const totalCols = row.getVisibleCells().length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0);
-      return /* @__PURE__ */ jsxs(React32__default.Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          TableRow,
-          {
-            "data-row": "true",
-            "data-state": row.getIsSelected() && "selected",
-            "data-selected-row": isSelectedByRowId ? "true" : void 0,
-            onClick: () => onRowClick?.(row.original),
-            onContextMenu: onRowContextMenu ? (e) => onRowContextMenu(e, row.original) : void 0,
-            className: cn(classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-brand/5 hover:bg-brand/5"),
-            children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  "aria-label": `Select row ${row.id}`,
-                  checked: row.getIsSelected(),
-                  onClick: (e) => e.stopPropagation(),
-                  onCheckedChange: (value) => row.toggleSelected(!!value)
-                }
-              ) }),
-              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: canExpand ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
-                  "aria-expanded": isExpanded,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    row.toggleExpanded();
-                  },
-                  className: "flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
-                  children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-                }
-              ) : null }),
-              row.getVisibleCells().map((cell) => {
-                const columnDef = cell.column.columnDef;
-                const meta = columnDef.meta || {};
-                const isEditable = Boolean(onCellEdit) && Boolean(meta.editable);
-                return /* @__PURE__ */ jsx(TableCell, { className: "h-14", children: isEditable ? /* @__PURE__ */ jsx(EditableCell, { cell, onCellEdit }) : flexRender(columnDef.cell, cell.getContext()) }, cell.id);
-              })
-            ]
-          }
-        ),
-        isExpanded && renderSubRow && /* @__PURE__ */ jsx(TableRow, { "data-expanded-row": "true", className: "bg-muted/40 hover:bg-muted/40", children: /* @__PURE__ */ jsx(TableCell, { colSpan: totalCols, className: "p-0", children: renderSubRow(row.original) }) })
-      ] }, row.id);
-    }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0), className: "h-16 text-center", children: noResultsText }) }) })
-  ] }) }) : /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
-      showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: "w-10 text-foreground h-12", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: cn("min-h-0 flex-1 overflow-hidden rounded-md bg-card", bordered ? "border border-muted-foreground" : "shadow-sm", classNames?.content), onContextMenu: handleBackgroundContextMenu, children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", colorStyle?.text, headerClassName, bordered && "[&_tr]:border-muted-foreground", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: cn("hover:bg-transparent", bordered && "border-muted-foreground"), children: [
+      showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12", colorStyle?.bg), children: /* @__PURE__ */ jsx(
         Checkbox,
         {
           "aria-label": "Select all rows",
@@ -6737,8 +7628,8 @@ function NTableContent({ effectiveMode }) {
           onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
         }
       ) }),
-      hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
-      hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { className: "text-foreground h-12", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
+      hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: cn("w-10 text-foreground h-12", colorStyle?.bg) }),
+      hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { className: cn("text-foreground h-12", colorStyle?.bg), children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
         flexRender(header.column.columnDef.header, header.getContext()),
         header.column.getCanSort() && showSorting && /* @__PURE__ */ jsx("span", { children: getSortIcon(header.column) })
       ] }) }, header.id))
@@ -6748,16 +7639,20 @@ function NTableContent({ effectiveMode }) {
       const canExpand = hasExpansion && row.getCanExpand();
       const isExpanded = canExpand && row.getIsExpanded();
       const totalCols = row.getVisibleCells().length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0);
-      return /* @__PURE__ */ jsxs(React32__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React38__default.Fragment, { children: [
         /* @__PURE__ */ jsxs(
           TableRow,
           {
             "data-row": "true",
+            "data-row-id": row.id,
             "data-state": row.getIsSelected() && "selected",
             "data-selected-row": isSelectedByRowId ? "true" : void 0,
             onClick: () => onRowClick?.(row.original),
-            onContextMenu: onRowContextMenu ? (e) => onRowContextMenu(e, row.original) : void 0,
-            className: cn(classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-brand/5 hover:bg-brand/5"),
+            onContextMenu: onRowContextMenu ? (e) => {
+              e.nativeEvent[ROW_CONTEXT_HANDLED] = true;
+              onRowContextMenu(e, row.original);
+            } : void 0,
+            className: cn(colorStyle?.row, classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-brand/5 hover:bg-brand/5", bordered && "border-border"),
             children: [
               showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(
                 Checkbox,
@@ -6778,7 +7673,10 @@ function NTableContent({ effectiveMode }) {
                     e.stopPropagation();
                     row.toggleExpanded();
                   },
-                  className: "flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
+                  className: cn(
+                    "flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
+                    bordered && "border border-muted-foreground"
+                  ),
                   children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
                 }
               ) : null }),
@@ -6796,49 +7694,272 @@ function NTableContent({ effectiveMode }) {
     }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0), className: "h-16 text-center", children: noResultsText }) }) })
   ] }) });
 }
-function NTableCards({ effectiveMode }) {
-  const table = useTableStore.use.table();
-  const onRowClick = useTableStore.use.onRowClick();
-  const onRowContextMenu = useTableStore.use.onRowContextMenu();
-  const CardComponent = useTableStore.use.CardComponent();
-  const storeIsCardView = useTableStore.use.isCardView();
-  const isLoading = useTableStore.use.isLoading();
-  const error = useTableStore.use.error();
-  const hasNoData = useTableStore.use.hasNoData();
-  const showContent = useTableStore.use.showContent();
-  const classNames = useTableStore.use.classNames();
-  const renderSubRow = useTableStore.use.renderSubRow();
-  const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
-  useTableStore.use.selectedRowId();
-  if (isLoading || error || hasNoData || !showContent || !table) return null;
-  const isCardView = effectiveMode ? effectiveMode === "cards" : storeIsCardView;
-  if (!isCardView) return null;
-  const rows = table.getRowModel().rows;
-  if (!CardComponent) return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No CardComponent provided." });
-  const defaultContainerClass = "flex flex-wrap gap-3 p-3 overflow-y-auto";
-  const containerClass = classNames?.cards ?? defaultContainerClass;
-  return /* @__PURE__ */ jsx("div", { className: cn(containerClass), children: rows.map((row) => {
-    const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
-    const canExpand = hasExpansion && row.getCanExpand();
-    const isExpanded = canExpand && row.getIsExpanded();
-    const handleClick = () => onRowClick?.(row.original);
-    const handleContextMenu = (e) => onRowContextMenu?.(e, row.original);
+function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered = false }) {
+  const canExpand = row.getCanExpand();
+  const isExpanded = canExpand && row.getIsExpanded();
+  const isSelected = row.getIsSelected();
+  const isHighlighted = selectedRowId != null && row.original?.id === selectedRowId;
+  const isActive = isSelected || isHighlighted;
+  const useMenuButton = menuButton && openRowMenu;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-row": "true",
+      "data-row-id": row.id,
+      onClick,
+      onContextMenu,
+      className: cn(
+        "relative group w-full rounded-lg bg-card",
+        bordered ? "border border-muted-foreground" : "shadow-sm",
+        isActive && (bordered ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
+        onClick && "cursor-pointer",
+        className
+      ),
+      children: [
+        showCheckbox && /* @__PURE__ */ jsx("div", { className: cn("absolute top-2 left-2 z-10 transition-opacity duration-200", isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isSelected,
+            onCheckedChange: (value) => {
+              row.toggleSelected(!!value);
+            },
+            onClick: (e) => e.stopPropagation(),
+            className: "h-4 w-4"
+          }
+        ) }),
+        useMenuButton ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Row actions",
+            onClick: (e) => {
+              e.stopPropagation();
+              openRowMenu(e, row.original);
+            },
+            className: "flex h-7 w-7 p-0 rounded-md cursor-pointer justify-center items-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+            children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+          }
+        ) }) : actions && (actions.onView || actions.onEdit || actions.onDelete) ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: (e) => e.stopPropagation(),
+              className: "flex h-7 w-7 p-0 rounded-md cursor-pointer justify-center items-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+              "aria-label": "Card actions",
+              children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
+            actions.onView && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  actions.onView(row.original);
+                },
+                className: "cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
+                  "View"
+                ]
+              }
+            ),
+            actions.onEdit && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  actions.onEdit(row.original);
+                },
+                className: "cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
+                  "Edit"
+                ]
+              }
+            ),
+            actions.onDelete && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  actions.onDelete(row.original);
+                },
+                className: "cursor-pointer text-red-500",
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2 text-red-500" }),
+                  "Delete"
+                ]
+              }
+            )
+          ] })
+        ] }) }) : null,
+        canExpand && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
+            "aria-expanded": isExpanded,
+            onClick: (e) => {
+              e.stopPropagation();
+              row.toggleExpanded();
+            },
+            className: cn(
+              "absolute bottom-2 right-2 z-10 flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
+              bordered && "border border-muted-foreground"
+            ),
+            children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+var ROW_CONTEXT_HANDLED2 = "__ntableRowContextHandled";
+function markRowContextHandled(e) {
+  e.nativeEvent[ROW_CONTEXT_HANDLED2] = true;
+}
+function isRowContextHandled(e) {
+  return Boolean(e.nativeEvent[ROW_CONTEXT_HANDLED2]);
+}
+function NTableCards({ effectiveMode }) {
+  const table = useTableStore.use.table();
+  const onRowClick = useTableStore.use.onRowClick();
+  const onRowContextMenu = useTableStore.use.onRowContextMenu();
+  const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
+  const openRowMenu = useTableStore.use.openRowMenu();
+  const menuButton = useTableStore.use.menuButton();
+  const onView = useTableStore.use.onView();
+  const onEdit = useTableStore.use.onEdit();
+  const onDelete = useTableStore.use.onDelete();
+  const showCheckbox = useTableStore.use.showCheckbox();
+  const selectedRowId = useTableStore.use.selectedRowId();
+  const CardComponent = useTableStore.use.CardComponent();
+  const storeIsCardView = useTableStore.use.isCardView();
+  const isLoading = useTableStore.use.isLoading();
+  const error = useTableStore.use.error();
+  const hasNoData = useTableStore.use.hasNoData();
+  const showContent = useTableStore.use.showContent();
+  const classNames = useTableStore.use.classNames();
+  const bordered = useTableStore.use.bordered();
+  const renderSubRow = useTableStore.use.renderSubRow();
+  const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
+  const handleContainerContextMenu = useCallback((e) => {
+    if (isRowContextHandled(e)) return;
+    const gridContainer = e.currentTarget;
+    let el = e.target;
+    let gridChild = null;
+    while (el && el.parentElement && el.parentElement !== gridContainer) {
+      el = el.parentElement;
+    }
+    gridChild = el.parentElement === gridContainer ? el : null;
+    if (gridChild) {
+      const rows2 = table?.getRowModel()?.rows;
+      if (!rows2) return;
+      const children = Array.from(gridContainer.children);
+      const idx = children.indexOf(gridChild);
+      if (idx >= 0 && idx < rows2.length) {
+        const row = rows2[idx];
+        if (onRowContextMenu) {
+          markRowContextHandled(e);
+          onRowContextMenu(e, row.original);
+        }
+        return;
+      }
+    }
+    if (onBackgroundContextMenu) {
+      onBackgroundContextMenu(e);
+    }
+  }, [table, onRowContextMenu, onBackgroundContextMenu]);
+  if (isLoading || error || hasNoData || !showContent || !table) return null;
+  const isCardView = effectiveMode ? effectiveMode === "cards" : storeIsCardView;
+  if (!isCardView) return null;
+  const rows = table.getRowModel().rows;
+  if (!CardComponent) return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No CardComponent provided." });
+  const defaultContainerClass = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3";
+  const containerClass = classNames?.cards ?? defaultContainerClass;
+  const actions = !menuButton && (onView || onEdit || onDelete) ? { onView, onEdit, onDelete } : void 0;
+  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: cn(containerClass), onContextMenu: handleContainerContextMenu, children: rows.map((row) => {
+    const noShell = Boolean(row.original?.__smsNoShell);
+    const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
+    const canExpand = hasExpansion && row.getCanExpand();
+    const isExpanded = canExpand && row.getIsExpanded();
+    const handleClick = onRowClick ? () => onRowClick(row.original) : void 0;
+    const handleCardContextMenu = onRowContextMenu ? (e) => {
+      if (isRowContextHandled(e)) return;
+      markRowContextHandled(e);
+      onRowContextMenu(e, row.original);
+    } : void 0;
+    if (noShell) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onContextMenu: handleCardContextMenu,
+          "data-row": "true",
+          "data-row-id": row.id,
+          className: "group relative",
+          children: [
+            menuButton && openRowMenu && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Row actions",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  openRowMenu(e, row.original);
+                },
+                className: "absolute top-2 right-2 z-10 flex h-7 w-7 items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
+                children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CardComponent,
+              {
+                data: row.original,
+                row,
+                onClick: handleClick,
+                onContextMenu: handleCardContextMenu,
+                isExpanded,
+                onToggleExpanded: () => row.toggleExpanded(),
+                canExpand,
+                renderSubRow: canExpand && isExpanded ? renderSubRow : void 0,
+                "data-row": "true",
+                "data-row-id": row.id
+              }
+            )
+          ]
+        },
+        row.id
+      );
+    }
     return /* @__PURE__ */ jsx(
-      CardComponent,
+      NDataCardShell,
       {
-        data: row.original,
         row,
         onClick: handleClick,
-        onContextMenu: handleContextMenu,
-        isExpanded,
-        onToggleExpanded: () => row.toggleExpanded(),
-        canExpand,
-        renderSubRow: canExpand && isExpanded ? renderSubRow : void 0,
-        "data-row": "true"
+        onContextMenu: handleCardContextMenu,
+        actions,
+        showCheckbox,
+        selectedRowId,
+        openRowMenu,
+        menuButton,
+        bordered,
+        children: /* @__PURE__ */ jsx(
+          CardComponent,
+          {
+            data: row.original,
+            row,
+            isExpanded,
+            onToggleExpanded: () => row.toggleExpanded(),
+            canExpand,
+            renderSubRow: canExpand && isExpanded ? renderSubRow : void 0
+          }
+        )
       },
       row.id
     );
-  }) });
+  }) }) });
 }
 function NTablePagination() {
   const table = useTableStore.use.table();
@@ -6853,12 +7974,14 @@ function NTablePagination() {
   const rowCount = useTableStore.use.rowCount();
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
+  const bordered = useTableStore.use.bordered();
   if (!table || !showContent || !showPagination || viewMode === "json" || viewMode === "files") return null;
   const filteredRows = table.getFilteredRowModel().rows;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
   const { pageIndex, pageSize } = table.getState().pagination;
   const effectivePageCount = manualPagination && pageCount !== void 0 ? pageCount : table.getPageCount();
   const currentPagination = pagination ?? { pageIndex, pageSize };
+  const currentPageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
   const navigate = (direction) => {
     let next;
     switch (direction) {
@@ -6886,8 +8009,8 @@ function NTablePagination() {
       (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows/page" }),
         /* @__PURE__ */ jsxs(Select, { value: `${pageSize}`, onValueChange: handlePageSizeChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
-          /* @__PURE__ */ jsx(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+          /* @__PURE__ */ jsx(SelectTrigger, { className: cn("h-8 w-[80px]", bordered && "border-muted-foreground"), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
+          /* @__PURE__ */ jsx(SelectContent, { side: "top", children: currentPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
@@ -6897,10 +8020,10 @@ function NTablePagination() {
         effectivePageCount
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
@@ -6911,101 +8034,196 @@ function NTablePagination() {
     ] })
   ] });
 }
+function SearchFilter({ placeholder }) {
+  const table = useTableStore.use.table();
+  const bordered = useTableStore.use.bordered();
+  if (!table) return null;
+  const value = table.getState().globalFilter ?? "";
+  return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered });
+}
 function TextFilter({ name, placeholder }) {
   const table = useTableStore.use.table();
+  const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
   if (!column) return null;
-  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder });
+  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
 }
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
+  const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
   if (!column) return null;
   const allOptions = [{ value: "__clear__", label: "All" }, ...options.map((o) => typeof o === "string" ? { value: o, label: o } : o)];
   const InputComponent = inputType === "combobox" ? ComboboxInput : SelectInput;
-  return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter..." });
+  return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered });
 }
-function TableFilters() {
-  const table = useTableStore.use.table();
-  const filters = useTableStore.use.filters();
-  if (!table || !filters?.length) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 w-full", children: filters.map((filter) => /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full lg:w-62", children: filter.type === "text" && !filter.onChange ? /* @__PURE__ */ jsx(TextFilter, { name: filter.name, placeholder: filter.placeholder }) : /* @__PURE__ */ jsx(SelectFilter, { name: filter.name, options: filter.options || [], placeholder: filter.placeholder, inputType: filter.type }) }, filter.name)) });
-}
-function getModeLabel(mode) {
-  if (mode === "json") return "JSON";
-  if (mode === "files") return "Files";
-  return mode.charAt(0).toUpperCase() + mode.slice(1);
+function defaultWrapperClass(filter) {
+  return filter.type === "search" ? "flex-1 min-w-[160px] max-w-sm" : "w-full sm:w-40 shrink-0";
 }
-function TableModeButtons() {
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const toolbarLabels = useTableStore.use.toolbarLabels();
-  const availableModes = useTableStore.use.availableModes();
-  const viewMode = useTableStore.use.viewMode();
-  const setViewMode = useTableStore.use.setViewMode();
-  const jsonValue = useTableStore.use.jsonValue();
-  const renderJson = useTableStore.use.renderJson();
-  const cardComponent = useTableStore.use.CardComponent();
-  if (!showViewToggle) return null;
-  const modes = [];
-  const allModes = ["table", "cards", "json", "files"];
-  const filteredModes = availableModes ?? allModes;
-  if (filteredModes.includes("table")) {
-    modes.push({ mode: "table", icon: /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5" }), active: viewMode === "table" });
+function RenderFilter({ filter }) {
+  const table = useTableStore.use.table();
+  const bordered = useTableStore.use.bordered();
+  if (filter.type === "search") {
+    return /* @__PURE__ */ jsx(SearchFilter, { placeholder: filter.placeholder });
   }
-  if (filteredModes.includes("cards") && cardComponent) {
-    modes.push({ mode: "cards", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-3.5 w-3.5" }), active: viewMode === "cards" });
+  if (filter.type === "date" && typeof filter.onChange === "function") {
+    return /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        value: filter.value ?? "",
+        onChange: filter.onChange,
+        placeholder: filter.placeholder,
+        bordered,
+        className: "w-full"
+      }
+    );
   }
-  if (filteredModes.includes("json") && (jsonValue !== void 0 || renderJson)) {
-    modes.push({ mode: "json", icon: /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5" }), active: viewMode === "json" });
+  if (typeof filter.onChange === "function") {
+    if (filter.type === "text" || !filter.type && typeof filter.value === "string") {
+      return /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: filter.value ?? "",
+          onChange: filter.onChange,
+          placeholder: filter.placeholder,
+          bordered,
+          className: "w-full"
+        }
+      );
+    }
+    if (filter.type === "combobox") {
+      return /* @__PURE__ */ jsx(
+        ComboboxInput,
+        {
+          value: filter.value ?? "",
+          onChange: filter.onChange,
+          items: filter.options || [],
+          placeholder: filter.placeholder,
+          searchPlaceholder: filter.searchPlaceholder,
+          emptyMessage: filter.emptyMessage,
+          icon: "filter",
+          showIcon: true,
+          disabled: filter.disabled,
+          bordered,
+          className: "w-full"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SelectInput,
+      {
+        value: filter.value ?? "",
+        onChange: filter.onChange,
+        items: filter.options || [],
+        placeholder: filter.placeholder,
+        icon: "filter",
+        showIcon: true,
+        disabled: filter.disabled,
+        bordered,
+        className: "w-full"
+      }
+    );
   }
-  if (filteredModes.includes("files")) {
-    modes.push({ mode: "files", icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-3.5 w-3.5" }), active: viewMode === "files" });
+  if (filter.type === "text") {
+    return /* @__PURE__ */ jsx(TextFilter, { name: filter.name, placeholder: filter.placeholder });
   }
-  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "View mode", className: "hidden items-center rounded-md border border-border bg-muted p-0.5 lg:flex h-10", children: modes.map(({ mode, icon, active }) => /* @__PURE__ */ jsxs(
-    "button",
+  if (!table) return null;
+  return /* @__PURE__ */ jsx(SelectFilter, { name: filter.name, options: filter.options || [], placeholder: filter.placeholder, inputType: filter.type });
+}
+function TableFilters() {
+  const filters = useTableStore.use.filters();
+  if (!filters?.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 flex-1 min-w-0", children: filters.map((filter) => /* @__PURE__ */ jsx(
+    "div",
     {
-      type: "button",
-      role: "tab",
-      "aria-label": `${mode.charAt(0).toUpperCase() + mode.slice(1)} view`,
-      "aria-selected": active,
-      onClick: () => setViewMode(mode),
-      className: cn(
-        "inline-flex h-8 items-center justify-center gap-1.5 rounded px-2.5 text-xs font-medium text-muted-foreground transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        active ? "bg-background text-foreground shadow-sm" : "hover:bg-accent hover:text-foreground"
-      ),
-      children: [
-        icon,
-        toolbarLabels && /* @__PURE__ */ jsx("span", { children: getModeLabel(mode) })
-      ]
+      className: cn(defaultWrapperClass(filter), filter.className),
+      children: /* @__PURE__ */ jsx(RenderFilter, { filter })
     },
-    mode
+    filter.name
   )) });
 }
 function TableAddButton() {
   const onAddClick = useTableStore.use.onAddClick();
   const showAddButton = useTableStore.use.showAddButton();
   const addButtonText = useTableStore.use.addButtonText();
+  const headerColor = useTableStore.use.headerColor();
+  const bordered = useTableStore.use.bordered();
   if (!showAddButton) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { onClick: onAddClick, className: "lg:hidden flex justify-center w-full items-center gap-2 cursor-pointer bg-primary h-10 px-4 rounded-lg hover:bg-primary/90", children: [
-      /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5 text-white" }),
-      /* @__PURE__ */ jsx("span", { className: "text-white text-sm font-medium", children: addButtonText || "Create" })
-    ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: onAddClick ?? void 0, className: "hidden lg:flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary text-white transition-colors hover:bg-primary/90", children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" }) })
-  ] });
+  const accentHex = headerColor ? HEADER_HEX[headerColor] : void 0;
+  const btnStyle = accentHex ? { backgroundColor: accentHex } : void 0;
+  const baseCls = accentHex ? "hover:opacity-90" : "bg-primary hover:bg-primary/90";
+  const borderedCls = bordered ? "border border-muted-foreground" : "";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onAddClick ?? void 0,
+      style: btnStyle,
+      "aria-label": addButtonText || "Create",
+      title: addButtonText || "Create",
+      className: `h-10 w-10 shrink-0 cursor-pointer flex items-center justify-center rounded-lg text-white transition-opacity ${baseCls} ${borderedCls}`,
+      children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" })
+    }
+  );
 }
-function ColumnVisibility() {
-  const table = useTableStore.use.table();
+function TableSettingsMenu() {
+  const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const toolbarLabels = useTableStore.use.toolbarLabels();
-  if (!table || !showColumnVisibility) return null;
-  return /* @__PURE__ */ jsxs(Select, { children: [
-    /* @__PURE__ */ jsx(SelectTrigger, { className: cn("h-10 bg-card border-border text-sm gap-1.5 px-3", toolbarLabels ? "min-w-[110px]" : "w-10 justify-center [&>svg:last-child]:hidden"), children: toolbarLabels ? /* @__PURE__ */ jsx(SelectValue, { placeholder: "Columns" }) : /* @__PURE__ */ jsx(List, { className: "h-4 w-4 shrink-0" }) }),
-    /* @__PURE__ */ jsx(SelectContent, { children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 py-1 px-2", children: [
-      /* @__PURE__ */ jsx(Checkbox, { id: column.id, checked: column.getIsVisible(), onCheckedChange: (checked) => column.toggleVisibility(!!checked) }),
-      /* @__PURE__ */ jsx("label", { htmlFor: column.id, className: "capitalize cursor-pointer text-sm", children: column.id })
-    ] }, column.id)) })
+  const availableModes = useTableStore.use.availableModes();
+  const viewMode = useTableStore.use.viewMode();
+  const setViewMode = useTableStore.use.setViewMode();
+  const jsonValue = useTableStore.use.jsonValue();
+  const renderJson = useTableStore.use.renderJson();
+  const cardComponent = useTableStore.use.CardComponent();
+  const table = useTableStore.use.table();
+  const bordered = useTableStore.use.bordered();
+  if (!showViewToggle && !showColumnVisibility) return null;
+  const allModes = ["table", "cards", "json", "files"];
+  const filteredModes = availableModes ?? allModes;
+  const modeItems = [];
+  if (showViewToggle) {
+    if (filteredModes.includes("table"))
+      modeItems.push({ value: "table", label: "Table", icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) });
+    if (filteredModes.includes("cards") && cardComponent)
+      modeItems.push({ value: "cards", label: "Cards", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }) });
+    if (filteredModes.includes("json") && (jsonValue !== void 0 || renderJson))
+      modeItems.push({ value: "json", label: "JSON", icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }) });
+    if (filteredModes.includes("files"))
+      modeItems.push({ value: "files", label: "Files", icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }) });
+  }
+  const columns = table?.getAllColumns?.().filter((c) => c.getCanHide()) ?? [];
+  const hasModes = modeItems.length > 0;
+  const hasColumns = columns.length > 0;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BaseInput, { className: "w-auto cursor-pointer px-3", onClick: (e) => e.preventDefault(), bordered, children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 bg-card", children: [
+      showViewToggle && hasModes && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
+          "View"
+        ] }),
+        /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: viewMode, onValueChange: (v) => setViewMode(v), children: modeItems.map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: item.value, children: [
+          item.icon,
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ] }, item.value)) })
+      ] }),
+      showViewToggle && hasModes && showColumnVisibility && hasColumns && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      showColumnVisibility && hasColumns && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
+          "Columns"
+        ] }),
+        columns.map((col) => /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            checked: col.getIsVisible(),
+            onCheckedChange: (c) => col.toggleVisibility(!!c),
+            children: /* @__PURE__ */ jsx("span", { className: "capitalize", children: col.id })
+          },
+          col.id
+        ))
+      ] })
+    ] })
   ] });
 }
 function TableToolbarSlot() {
@@ -7019,31 +8237,41 @@ function NTableHeader() {
   const hasControls = useTableStore.use.hasControls();
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
+  const hasNoData = useTableStore.use.hasNoData();
+  const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
   const filters = useTableStore.use.filters();
   const headerSlot = useTableStore.use.headerSlot();
   const renderToolbar = useTableStore.use.renderToolbar();
   const classNames = useTableStore.use.classNames();
   const isCustomMode = useTableStore.use.isCustomMode();
   const showViewToggle = useTableStore.use.showViewToggle();
-  if (isLoading || error) return null;
+  const showColumnVisibility = useTableStore.use.showColumnVisibility();
+  const hideDataChrome = isLoading || error || hasNoData && !isFilteredEmpty;
   if (isCustomMode) {
-    if (!showViewToggle && !headerSlot) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 flex-wrap lg:flex-nowrap", headerSlot ? "justify-between" : "justify-end", classNames?.header), children: [
-      headerSlot && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerSlot }),
-      showViewToggle && /* @__PURE__ */ jsx(TableModeButtons, {})
+    if (!showViewToggle && !showColumnVisibility && !headerSlot && !hasControls) return null;
+    if (hideDataChrome && !hasControls) return null;
+    const justify2 = headerSlot && !hideDataChrome ? "justify-between" : "justify-end";
+    return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-3 flex-wrap lg:flex-nowrap", justify2, classNames?.header), children: [
+      headerSlot && !hideDataChrome && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerSlot }),
+      hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
+        /* @__PURE__ */ jsx(TableSettingsMenu, {}),
+        /* @__PURE__ */ jsx(TableAddButton, {})
+      ] })
     ] });
   }
   const hasFilters = Array.isArray(filters) && filters.length > 0;
   const hasToolbar = Boolean(renderToolbar);
   if (!hasFilters && !hasControls && !headerSlot && !hasToolbar) return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 flex-wrap lg:flex-nowrap", hasControls || headerSlot || hasToolbar ? "justify-between" : "justify-start", classNames?.header), children: [
-    /* @__PURE__ */ jsx(TableFilters, {}),
-    headerSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: headerSlot }),
-    /* @__PURE__ */ jsx(TableToolbarSlot, {}),
-    hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(TableModeButtons, {}),
-      /* @__PURE__ */ jsx(TableAddButton, {}),
-      /* @__PURE__ */ jsx(ColumnVisibility, {})
+  if (hideDataChrome && !hasControls) return null;
+  const onlyControls = hideDataChrome && hasControls && !headerSlot && !hasToolbar;
+  const justify = onlyControls ? "justify-end" : hasControls || headerSlot || hasToolbar ? "justify-between" : "justify-start";
+  return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-3 flex-wrap lg:flex-nowrap", justify, classNames?.header), children: [
+    !hideDataChrome && /* @__PURE__ */ jsx(TableFilters, {}),
+    headerSlot && !hideDataChrome && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: headerSlot }),
+    !hideDataChrome && /* @__PURE__ */ jsx(TableToolbarSlot, {}),
+    hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsx(TableSettingsMenu, {}),
+      /* @__PURE__ */ jsx(TableAddButton, {})
     ] })
   ] });
 }
@@ -7060,7 +8288,7 @@ function NTableJson() {
   const renderJson = useTableStore.use.renderJson();
   const jsonValue = useTableStore.use.jsonValue();
   if (viewMode !== "json") return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx("pre", { className: "h-full min-h-0 overflow-auto rounded-md border border-border bg-muted/40 p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
 }
 var DEFAULT_ROWS = 6;
 function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
@@ -7080,10 +8308,10 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
       "data-testid": "ntable-loading-skeleton",
       "aria-busy": "true",
       "aria-label": loadingText,
-      className: cn("rounded-md p-0 border", dynamicHeight ? "overflow-hidden" : "overflow-auto", classNames?.content),
+      className: cn("rounded-md p-0 border", dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
       children: [
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-        /* @__PURE__ */ jsx("div", { className: dynamicHeight ? "overflow-auto" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx("div", { className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
           /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, dynamicHeight && "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
             showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
             hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
@@ -7115,11 +8343,43 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
     }
   );
 }
+function TableStateSlot({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-64 flex-1 items-center justify-center", children });
+}
+function DefaultTableEmptyState({ title }) {
+  const onAddClick = useTableStore.use.onAddClick();
+  const showAddButton = useTableStore.use.showAddButton();
+  const addButtonText = useTableStore.use.addButtonText();
+  const bordered = useTableStore.use.bordered();
+  const canAdd = Boolean(showAddButton && onAddClick);
+  return /* @__PURE__ */ jsx(
+    NEmptyState,
+    {
+      icon: Inbox,
+      title,
+      description: canAdd ? "Add your first item to get started." : void 0,
+      action: canAdd ? /* @__PURE__ */ jsxs(Button, { size: "sm", bordered, onClick: () => onAddClick?.(), children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+        addButtonText || "Add item"
+      ] }) : void 0
+    }
+  );
+}
+function DefaultTableFilteredEmptyState() {
+  return /* @__PURE__ */ jsx(
+    NEmptyState,
+    {
+      icon: SearchX,
+      title: "No results found",
+      description: "Try adjusting your filters."
+    }
+  );
+}
 function TableLayout(props) {
   const containerRef = useRef(null);
   const classNames = useTableStore.use.classNames?.();
   const className = useTableStore.use.className();
-  const dynamicHeight = useTableStore.use.dynamicHeight();
+  useTableStore.use.dynamicHeight();
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
@@ -7143,7 +8403,11 @@ function TableLayout(props) {
   }, []);
   useDynamicPageSize(containerRef);
   useTable();
-  useTableKeyboard();
+  useTableKeyboard({
+    scopeRef: containerRef,
+    contextMenuClose: props.contextMenuClose,
+    contextMenuOpen: props.contextMenuOpen
+  });
   const effectiveMode = (() => {
     if (viewMode === "json") return "json";
     if (isMobile && responsiveCards && CardComponent) return "cards";
@@ -7152,18 +8416,18 @@ function TableLayout(props) {
   const showFilteredEmpty = isFilteredEmpty && !isLoading && !error;
   const showEmpty = hasNoData && !isLoading && !error && !showFilteredEmpty;
   const customRenderer = isCustomMode ? renderCustomMode?.[viewMode] : void 0;
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex flex-col gap-2 w-full h-full px-4 py-2", !dynamicHeight && "overflow-auto", classNames?.root, className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-ntable-root": true, className: cn("flex h-full min-h-0 flex-1 w-full flex-col gap-2 overflow-hidden", classNames?.root, className), children: [
     /* @__PURE__ */ jsx(NTableHeader, {}),
-    isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
-      isLoading && (props.renderLoading ? props.renderLoading() : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NLoadingState, { label: loadingText })),
-      error && !isLoading && (props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" })),
-      showFilteredEmpty && (props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(NEmptyState, { title: "No results found" })),
-      showEmpty && (props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(NEmptyState, { title: noDataText })),
+    /* @__PURE__ */ jsx("div", { "data-ntable-body": true, className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden", children: isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      isLoading && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : /* @__PURE__ */ jsx(TableStateSlot, { children: /* @__PURE__ */ jsx(NLoadingState, { label: loadingText }) })),
+      error && !isLoading && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" }) }),
+      showFilteredEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableFilteredEmptyState, {}) }),
+      showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),
       /* @__PURE__ */ jsx(NTableContent, { effectiveMode }),
       /* @__PURE__ */ jsx(NTableCards, { effectiveMode }),
-      /* @__PURE__ */ jsx(NTableJson, {}),
-      /* @__PURE__ */ jsx(NTablePagination, {})
-    ] })
+      /* @__PURE__ */ jsx(NTableJson, {})
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "shrink-0", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
   ] });
 }
 function NTable(props) {
@@ -7194,6 +8458,57 @@ function NTable(props) {
       console.warn(`NTable ignored custom renderer(s) not listed in availableModes: ${ignored.join(", ")}`);
     }
   }, [props.renderCustomMode, availableModes]);
+  const ctx = useContextMenu();
+  const { onView, onEdit, onDelete, menu, menuButton: menuButtonProp, onRowContextMenu } = props;
+  const normalizedMenu = typeof menu === "function" ? { row: menu } : menu ?? {};
+  const hasDefaultActions = Boolean(onView || onEdit || onDelete);
+  const defaultActionRowMenu = useCallback(
+    (row) => {
+      const items = [];
+      if (onView) items.push({ label: "View", icon: Eye, onSelect: () => onView(row) });
+      if (onEdit) items.push({ label: "Edit", icon: Pencil, onSelect: () => onEdit(row) });
+      if (onDelete) {
+        items.push({ label: "Delete", icon: Trash2, danger: true, separatorBefore: items.length > 0, onSelect: () => onDelete(row) });
+      }
+      return items;
+    },
+    [onView, onEdit, onDelete]
+  );
+  const effectiveRowMenu = normalizedMenu.row ?? (hasDefaultActions ? defaultActionRowMenu : void 0);
+  const openItems = useCallback((e, items) => {
+    if (!items.length) return;
+    ctx.open(e, items);
+  }, [ctx]);
+  const handleRowContextMenu = useCallback(
+    (e, row) => {
+      onRowContextMenu?.(e, row);
+      if (e.defaultPrevented || !effectiveRowMenu) return;
+      openItems(e, effectiveRowMenu(row));
+    },
+    [onRowContextMenu, effectiveRowMenu, openItems]
+  );
+  const handleBackgroundContextMenu = useCallback(
+    (e) => {
+      if (!normalizedMenu.background) return;
+      openItems(e, normalizedMenu.background());
+    },
+    [normalizedMenu.background, openItems]
+  );
+  const handleOpenRowMenu = useCallback(
+    (e, row) => {
+      if (!effectiveRowMenu) return;
+      openItems(e, effectiveRowMenu(row));
+    },
+    [effectiveRowMenu, openItems]
+  );
+  const handleManualRowMenu = useCallback(
+    (e, row) => {
+      onRowContextMenu?.(e, row);
+    },
+    [onRowContextMenu]
+  );
+  const autoOpenRowMenu = effectiveRowMenu ? handleOpenRowMenu : onRowContextMenu ? handleManualRowMenu : null;
+  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? true);
   const store = useStoreSync({
     data: props.data ?? [],
     columns: props.columns ?? [],
@@ -7206,7 +8521,9 @@ function NTable(props) {
     CardComponent: props.renderCard ?? null,
     className: props.className ?? "",
     classNames: props.classNames ?? {},
+    bordered: props.bordered ?? false,
     headerClassName: props.headerClassName ?? "bg-card",
+    headerColor: props.headerColor ?? "primary",
     showCheckbox: props.showCheckbox ?? true,
     selectedRowId: props.selectedRowId ?? null,
     headerSlot: props.headerSlot ?? null,
@@ -7215,7 +8532,10 @@ function NTable(props) {
     onEdit: props.onEdit ?? null,
     onDelete: props.onDelete ?? null,
     onRowClick: props.onRowClick ?? null,
-    onRowContextMenu: props.onRowContextMenu ?? null,
+    onRowContextMenu: onRowContextMenu || effectiveRowMenu ? handleRowContextMenu : null,
+    onBackgroundContextMenu: normalizedMenu.background ? handleBackgroundContextMenu : null,
+    openRowMenu: autoOpenRowMenu,
+    menuButton: effectiveMenuButton,
     onCellEdit: props.onCellEdit ?? null,
     onBulkDelete: props.onBulkDelete ?? null,
     onStateChange: props.onStateChange ?? null,
@@ -7268,115 +8588,20 @@ function NTable(props) {
     getRowCanExpand: props.getRowCanExpand ?? null,
     renderSubRow: props.renderSubRow ?? null
   });
-  return /* @__PURE__ */ jsx(TableStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(
-    TableLayout,
-    {
-      renderEmpty: props.renderEmpty,
-      renderFilteredEmpty: props.renderFilteredEmpty,
-      renderError: props.renderError,
-      renderLoading: props.renderLoading
-    }
-  ) });
-}
-function NDataCardShell({ row, onClick, onContextMenu, actions, children, className }) {
-  const canExpand = row.getCanExpand();
-  const isExpanded = canExpand && row.getIsExpanded();
-  const isSelected = row.getIsSelected();
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      onClick,
-      onContextMenu,
-      className: cn(
-        "relative p-4 h-auto transition-all duration-200 hover:shadow-md group w-full sm:w-[calc(50%-12px)] lg:w-[calc(33%-16px)] xl:w-[calc(25%-18px)]",
-        isSelected && "ring-1 ring-primary",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: cn("absolute top-2 left-2 z-10 transition-opacity duration-200", isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: isSelected,
-            onCheckedChange: (value) => {
-              row.toggleSelected(!!value);
-            },
-            onClick: (e) => e.stopPropagation(),
-            className: "h-4 w-4"
-          }
-        ) }),
-        actions && (actions.onView || actions.onEdit || actions.onDelete) && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              onClick: (e) => e.stopPropagation(),
-              className: "flex h-8 w-8 p-0 rounded-full cursor-pointer justify-center items-center",
-              "aria-label": "Card actions",
-              children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-5 w-5" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
-            actions.onView && /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  actions.onView(row.original);
-                },
-                className: "cursor-pointer",
-                children: [
-                  /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
-                  "View"
-                ]
-              }
-            ),
-            actions.onEdit && /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  actions.onEdit(row.original);
-                },
-                className: "cursor-pointer",
-                children: [
-                  /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
-                  "Edit"
-                ]
-              }
-            ),
-            actions.onDelete && /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  actions.onDelete(row.original);
-                },
-                className: "cursor-pointer text-red-500",
-                children: [
-                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2 text-red-500" }),
-                  "Delete"
-                ]
-              }
-            )
-          ] })
-        ] }) }),
-        canExpand && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
-            "aria-expanded": isExpanded,
-            onClick: (e) => {
-              e.stopPropagation();
-              row.toggleExpanded();
-            },
-            className: "absolute bottom-2 right-2 z-10 flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
-            children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-          }
-        ),
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(TableStoreContext.Provider, { value: store, children: [
+    /* @__PURE__ */ jsx(
+      TableLayout,
+      {
+        renderEmpty: props.renderEmpty,
+        renderFilteredEmpty: props.renderFilteredEmpty,
+        renderError: props.renderError,
+        renderLoading: props.renderLoading,
+        contextMenuClose: ctx.close,
+        contextMenuOpen: ctx.isOpen
+      }
+    ),
+    ctx.menu
+  ] });
 }
 function NTableCardRoot({ card, children, className, ...rest }) {
   return /* @__PURE__ */ jsx(
@@ -7666,7 +8891,7 @@ function NSmartPasteDialog({
       title,
       description: subtitle,
       width: 560,
-      bodyClassName: "min-h-0 flex-1 overflow-y-auto px-6 pt-2 pb-5 flex flex-col",
+      bodyClassName: "px-6 pt-2 pb-5 flex flex-col",
       footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
         /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleCancel, children: "Cancel" }),
         /* @__PURE__ */ jsxs(
@@ -7731,7 +8956,7 @@ function NSmartPasteDialog({
 }
 function NSidebarHeader({ children, collapsed, className, classNames }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center h-14 min-h-14 px-4 border-b border-border/70 shrink-0", collapsed ? "justify-center" : "justify-between gap-2", classNames?.sidebarHeader, className), children: /* @__PURE__ */ jsx("div", { className: "min-w-0", children }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center h-14 min-h-14 px-4 border-b border-border/70 shrink-0 justify-between gap-2", classNames?.sidebarHeader, className), children: /* @__PURE__ */ jsx("div", { className: "min-w-0", children }) });
 }
 function NSidebarLogo({
   icon,
@@ -7741,7 +8966,7 @@ function NSidebarLogo({
   collapsed = false
 }) {
   if (!icon && !title && !subtitle) return null;
-  const IconNode = typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon ? React32__default.createElement(icon, { className: "h-5 w-5 text-primary" }) : icon;
+  const IconNode = typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon ? React38__default.createElement(icon, { className: "h-5 w-5 text-primary" }) : icon;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -7766,6 +8991,9 @@ function defaultIsActive(item, activePath) {
   if (item.id) return activePath === item.id;
   return false;
 }
+function hasActiveChild(item, activePath, isActive) {
+  return Boolean(item.children?.some((child) => isActive(child, activePath) || hasActiveChild(child, activePath, isActive)));
+}
 function NSidebarItem({
   item,
   activePath = "",
@@ -7776,14 +9004,18 @@ function NSidebarItem({
   depth = 0,
   classNames
 }) {
-  const [open, setOpen] = useState(false);
   const active = isActive(item, activePath);
   const hasChildren = item.children && item.children.length > 0;
+  const childActive = hasActiveChild(item, activePath, isActive);
+  const [open, setOpen] = useState(childActive);
   const Icon2 = item.icon;
+  useEffect(() => {
+    if (childActive) setOpen(true);
+  }, [childActive]);
   const baseClasses = cn(
     "flex items-center gap-3 w-full rounded-md text-sm px-2 font-medium transition-colors h-8 text-left",
     depth > 0 && "pl-7",
-    item.disabled ? "opacity-50 cursor-not-allowed" : active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+    item.disabled ? "opacity-50 cursor-not-allowed" : active ? "cursor-pointer bg-primary text-primary-foreground" : "cursor-pointer text-muted-foreground hover:bg-accent hover:text-accent-foreground",
     classNames?.sidebarItem
   );
   const handleClick = () => {
@@ -7904,7 +9136,7 @@ function NSidebarContent({
   showSectionSeparators,
   classNames
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto flex flex-col gap-3 px-4 py-2", children: groups.map((group, gi) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-3 px-4 py-2", children: groups.map((group, gi) => /* @__PURE__ */ jsx(
     NSidebarSection,
     {
       group,
@@ -7920,24 +9152,25 @@ function NSidebarContent({
       classNames
     },
     gi
-  )) });
+  )) }) });
 }
 function DefaultFooter({
   onSettings,
   settingsLabel = "Settings",
   onLogout,
-  logoutLabel = "Logout"
+  logoutLabel = "Logout",
+  collapsed = false
 }) {
   if (!onSettings && !onLogout) return null;
-  const itemClass = "flex items-center gap-3 w-full h-9 rounded-md text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors text-left";
+  const itemClass = "flex h-8 w-full cursor-pointer items-center gap-3 rounded-md px-2 text-left text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-    onSettings && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSettings, className: itemClass, children: [
+    onSettings && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSettings, className: itemClass, "aria-label": settingsLabel, title: settingsLabel, children: [
       /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: settingsLabel })
+      !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: settingsLabel })
     ] }),
-    onLogout && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onLogout, className: itemClass, children: [
+    onLogout && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onLogout, className: itemClass, "aria-label": logoutLabel, title: logoutLabel, children: [
       /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: logoutLabel })
+      !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: logoutLabel })
     ] })
   ] });
 }
@@ -7950,25 +9183,28 @@ function NSidebarFooter({
   showCollapseButton,
   collapsed = false,
   onToggleCollapsed,
-  collapseLabel = "Collapse sidebar",
-  expandLabel = "Expand sidebar",
+  collapseLabel = "Collapse",
+  expandLabel = "Expand",
   isMobile = false,
   className,
   classNames
 }) {
-  const defaultFooter = !(onSettings || onLogout) ? null : /* @__PURE__ */ jsx(DefaultFooter, { onSettings, settingsLabel, onLogout, logoutLabel });
+  const defaultFooter = !(onSettings || onLogout) ? null : /* @__PURE__ */ jsx(DefaultFooter, { onSettings, settingsLabel, onLogout, logoutLabel, collapsed });
   const footerContent = children ?? defaultFooter;
   const showCollapseInFooter = showCollapseButton && !isMobile;
   const CollapseIcon = collapsed ? PanelLeftOpen : PanelLeftClose;
   if (!footerContent && !showCollapseInFooter) return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("border-t border-border/70 p-2 shrink-0 flex flex-col gap-1", classNames?.sidebarFooter, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-t border-border/70 px-4 py-2 shrink-0 flex flex-col gap-1", classNames?.sidebarFooter, className), children: [
     footerContent,
     showCollapseInFooter && /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: onToggleCollapsed,
-        className: "flex items-center gap-3 w-full rounded-md text-sm font-medium transition-colors h-8 text-left text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        className: cn(
+          "flex items-center w-full cursor-pointer rounded-md text-sm font-medium transition-colors h-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          "gap-3 px-2 text-left"
+        ),
         "aria-label": collapsed ? expandLabel : collapseLabel,
         title: collapsed ? expandLabel : collapseLabel,
         children: [
@@ -7984,11 +9220,13 @@ function NSidebarMobile({
   onOpen,
   onClose,
   mobileBreakpoint = "md",
+  width = 240,
   hamburgerLabel = "Open sidebar",
   closeLabel = "Close sidebar",
   hamburgerClassName,
   showHamburgerButton = true,
-  children
+  children,
+  bordered = false
 }) {
   const mobileClass = mobileBreakpoint === "sm" ? "sm:hidden" : mobileBreakpoint === "lg" ? "lg:hidden" : "md:hidden";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8019,10 +9257,12 @@ function NSidebarMobile({
       "aside",
       {
         className: cn(
-          "fixed inset-y-0 left-0 z-50 w-60 bg-card border-r flex flex-col transition-transform duration-200",
+          "fixed inset-y-0 left-0 z-50 bg-card flex flex-col transition-transform duration-200",
+          bordered ? "border border-muted-foreground shadow-none" : "border-r",
           mobileClass,
           open ? "translate-x-0" : "-translate-x-full"
         ),
+        style: { width },
         children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -8068,6 +9308,7 @@ function NSidebar({
   showSectionLabels = true,
   showSectionIcons = true,
   showSectionSeparators = false,
+  bordered = false,
   footer,
   className,
   classNames,
@@ -8078,8 +9319,8 @@ function NSidebar({
   closeOnNavigate = true,
   hamburgerLabel = "Open sidebar",
   closeLabel = "Close sidebar",
-  collapseLabel = "Collapse sidebar",
-  expandLabel = "Expand sidebar",
+  collapseLabel = "Collapse",
+  expandLabel = "Expand",
   hamburgerClassName,
   showHamburgerButton = true,
   logoIcon,
@@ -8089,7 +9330,8 @@ function NSidebar({
   onSettings,
   settingsLabel,
   onLogout,
-  logoutLabel
+  logoutLabel,
+  widths
 }) {
   const [_mobileOpen, _setMobileOpen] = useState(defaultMobileOpen);
   const [_collapsed, _setCollapsed] = useState(defaultCollapsed);
@@ -8111,6 +9353,9 @@ function NSidebar({
   }, [onNavigate, closeOnNavigate]);
   const groups = useMemo(() => buildGroups(navItems), [navItems]);
   const desktopClass = mobileBreakpoint === "sm" ? "hidden sm:flex" : mobileBreakpoint === "lg" ? "hidden lg:flex" : "hidden md:flex";
+  const expandedWidth = widths?.expanded ?? 240;
+  const collapsedWidth = widths?.collapsed ?? 64;
+  const mobileWidth = widths?.mobile ?? expandedWidth;
   const defaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed }) : null;
   const headerContent = logo ?? defaultLogoContent;
   const contentProps = {
@@ -8156,14 +9401,29 @@ function NSidebar({
         onOpen: () => setMobileOpen(true),
         onClose: () => setMobileOpen(false),
         mobileBreakpoint,
+        width: mobileWidth,
         hamburgerLabel,
         closeLabel,
         hamburgerClassName,
         showHamburgerButton,
+        bordered,
         children: mobileInner
       }
     ),
-    /* @__PURE__ */ jsx("aside", { className: cn(desktopClass, "flex flex-col h-full bg-card transition-all duration-200", collapsed ? "w-16" : "w-60", classNames?.sidebar, className), children: sidebarInner })
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        className: cn(
+          desktopClass,
+          "flex flex-col h-full bg-card transition-all duration-200",
+          bordered && "border border-muted-foreground shadow-none",
+          classNames?.sidebar,
+          className
+        ),
+        style: { width: collapsed ? collapsedWidth : expandedWidth },
+        children: sidebarInner
+      }
+    )
   ] });
 }
 function getInitials2(name) {
@@ -8187,7 +9447,7 @@ function NNavbar({
     "header",
     {
       className: cn(
-        "flex items-center justify-between h-14 px-4 border-b bg-card shrink-0",
+        "flex items-center justify-between h-14 px-4 bg-card shadow-sm shrink-0",
         classNames?.navbar,
         className
       ),
@@ -8232,7 +9492,7 @@ function NNavbar({
               (userMenuActions.length > 0 || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
               userMenuActions.map((action) => {
                 const ActionIcon = action.icon;
-                return /* @__PURE__ */ jsxs(React32__default.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React38__default.Fragment, { children: [
                   action.separator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
                   /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: action.onClick, className: "cursor-pointer", children: [
                     ActionIcon && /* @__PURE__ */ jsx(ActionIcon, { className: "h-4 w-4 mr-2" }),
@@ -8271,6 +9531,7 @@ function NAppShell({
   defaultCollapsed = false,
   onCollapsedChange,
   collapseButtonPosition,
+  widths,
   sidebarFooter,
   navbarLeft,
   navbarRight,
@@ -8318,6 +9579,7 @@ function NAppShell({
         onCollapsedChange: handleToggleCollapsed,
         footer: sidebarFooter,
         collapseButtonPosition,
+        widths,
         classNames,
         mobileOpen,
         onMobileOpenChange: setMobileOpen,
@@ -8341,7 +9603,7 @@ function NAppShell({
           classNames
         }
       ),
-      /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto", classNames?.content), children })
+      /* @__PURE__ */ jsx(NajmScroll, { element: "main", axis: "y", className: cn("flex-1", classNames?.content), children })
     ] })
   ] });
 }
@@ -8383,50 +9645,82 @@ function NCommandPalette({
     ] })
   ] });
 }
-function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, footer, search, children, contentClassName, contentRef }) {
+function NPageHeaderActions({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-2 sm:gap-3", className), children });
+}
+NPageHeaderActions.displayName = "NPageHeaderActions";
+function NPageHeaderFilters({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3 sm:px-5", className), children });
+}
+NPageHeaderFilters.displayName = "NPageHeaderFilters";
+function NPageHeaderTop({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+NPageHeaderTop.displayName = "NPageHeaderTop";
+function isPageHeaderSlot(child, slot) {
+  return React38__default.isValidElement(child) && child.type === slot;
+}
+function getSlotElements(children, slot) {
+  const matches = React38__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
+  return matches.length > 0 ? matches : void 0;
+}
+function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, search, children, className, headerClassName, bordered = false }) {
   const [internalSearch, setInternalSearch] = useState("");
   const searchValue = search?.value ?? internalSearch;
   const handleSearchChange = useCallback((e) => {
     setInternalSearch(e.target.value);
     search?.onChange?.(e);
   }, [search?.onChange]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 flex-row items-center justify-between gap-2 border-b border-border px-4 pl-16 sm:px-5 md:pl-5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 rounded-lg bg-primary/10 items-center justify-center", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-primary" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: title }),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs leading-relaxed text-muted-foreground sm:text-sm sm:leading-normal", children: subtitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
-        search && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: search.ref,
-              type: "text",
-              value: searchValue,
-              placeholder: search.placeholder ?? "Search...",
-              className: cn(
-                "h-9 w-full max-w-[280px] rounded-lg bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground outline-none border border-border focus:border-primary focus:ring-1 focus:ring-primary/20 transition-colors",
-                search.className
-              ),
-              onChange: handleSearchChange
-            }
-          )
+  const slottedActions = getSlotElements(children, NPageHeaderActions);
+  const slottedFilters = getSlotElements(children, NPageHeaderFilters);
+  const slottedTop = getSlotElements(children, NPageHeaderTop);
+  const resolvedActions = slottedActions ?? actions;
+  const resolvedFilters = slottedFilters ?? filters;
+  const resolvedTop = slottedTop ?? top;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "page-header",
+      className: cn(
+        "border-b border-border",
+        bordered && "rounded-xl border border-muted-foreground bg-card shadow-none",
+        className
+      ),
+      children: [
+        resolvedTop,
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-14 flex-row items-center justify-between gap-2 px-4 pl-16 sm:px-5 md:pl-5", headerClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 rounded-lg bg-primary/10 items-center justify-center", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-primary" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs leading-relaxed text-muted-foreground sm:text-sm sm:leading-normal", children: subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+            search && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: search.ref,
+                  type: "text",
+                  value: searchValue,
+                  placeholder: search.placeholder ?? "Search...",
+                  className: cn(
+                    "h-9 w-full max-w-[280px] rounded-lg bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground outline-none border border-border focus:border-primary focus:ring-1 focus:ring-primary/20 transition-colors",
+                    search.className
+                  ),
+                  onChange: handleSearchChange
+                }
+              )
+            ] }),
+            resolvedActions && (slottedActions ? resolvedActions : /* @__PURE__ */ jsx(NPageHeaderActions, { children: resolvedActions }))
+          ] })
         ] }),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 sm:gap-3", children: actions })
-      ] })
-    ] }),
-    top,
-    /* @__PURE__ */ jsxs("div", { ref: contentRef, className: contentClassName ?? "flex-1 overflow-auto", children: [
-      filters && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-background/95 backdrop-blur", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3 sm:px-5", children: filters }) }),
-      children
-    ] }),
-    footer
-  ] });
+        resolvedFilters && (slottedFilters ? resolvedFilters : /* @__PURE__ */ jsx(NPageHeaderFilters, { children: resolvedFilters }))
+      ]
+    }
+  );
 }
 function NInspectorSheet({ open, onClose, title, children }) {
   useEffect(() => {
@@ -8452,4 +9746,4 @@ function NInspectorSheet({ open, onClose, title, children }) {
   ] }) });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Input, Label, LangInput, MultiSelectInput, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NIcon, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NUploader, NViewBody, NViewToggle, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, dialogVariants, formatFileBytes, formatFileRelative, getIconColorProps, resolvePreset, resolveSlot, swapVariants, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };
+export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label, LangInput, MultiSelectInput, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderFilters, NPageHeaderTop, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NUploader, NViewBody, NViewToggle, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, dialogVariants, formatFileBytes, formatFileRelative, getIconColorProps, indicatorVariants, resolvePreset, resolveSlot, sliderVariants, swapVariants, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };