najm-kit 0.0.8 → 0.0.10

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import * as React38 from 'react';
-import React38__default, { createContext, useContext, useCallback, useEffect, useState, useRef, useLayoutEffect, useMemo } from 'react';
+import * as React from 'react';
+import React__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, 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 { 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, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, 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';
@@ -54,6 +54,8 @@ var lightMode = {
   destructive: "0 84.2% 60.2%",
   "destructive-foreground": "0 0% 98%",
   border: "0 0% 89.8%",
+  "border-subtle": "0 0% 95%",
+  "border-strong": "0 0% 30%",
   input: "0 0% 89.8%",
   radius: "0.5rem"
 };
@@ -73,6 +75,8 @@ var darkMode = {
   destructive: "0 84% 60%",
   "destructive-foreground": "0 0% 100%",
   border: "240 6% 15%",
+  "border-subtle": "240 6% 11%",
+  "border-strong": "0 0% 78%",
   input: "240 6% 15%",
   radius: "0.5rem"
 };
@@ -162,37 +166,106 @@ function tokensToStyle(tokens, accentOnly) {
   }
   return style;
 }
-var NajmThemeDepthContext = React38.createContext(0);
-var NajmThemeContainerCtx = React38.createContext(null);
+var NajmThemeDepthContext = React.createContext(0);
+var NajmThemeContainerCtx = React.createContext(null);
+var DEFAULT_APPEARANCE = {
+  borderDegree: "default"
+};
+var NajmAppearanceContext = React.createContext(DEFAULT_APPEARANCE);
+function useNajmAppearance() {
+  return React.useContext(NajmAppearanceContext);
+}
 function NajmThemeProvider({
   preset,
   mode,
   accent,
   tokens,
   accentOnly,
+  appearance,
   className,
   asChild,
   children
 }) {
-  const depth = React38.useContext(NajmThemeDepthContext);
+  const depth = React.useContext(NajmThemeDepthContext);
   const isRoot = depth === 0;
-  const resolved = React38.useMemo(() => {
+  const parentAppearance = React.useContext(NajmAppearanceContext);
+  const shouldApplyThemeTokens = isRoot || Boolean(preset || mode || tokens);
+  const resolved = React.useMemo(() => {
+    if (!shouldApplyThemeTokens) return null;
     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 = React38.useMemo(() => tokensToStyle(resolved, accentOnly), [resolved, accentOnly]);
+  }, [preset, mode, accent, tokens, shouldApplyThemeTokens]);
+  const style = React.useMemo(() => resolved ? tokensToStyle(resolved, accentOnly) : void 0, [resolved, accentOnly]);
   const Comp = asChild ? Slot : "div";
-  const [container, setContainer] = React38.useState(null);
-  React38.useEffect(() => {
+  const [container, setContainer] = React.useState(null);
+  const resolvedAppearance = React.useMemo(
+    () => ({ ...parentAppearance, ...appearance ?? {} }),
+    [parentAppearance, appearance]
+  );
+  React.useEffect(() => {
     if (!isRoot) return;
     const root = document.documentElement;
-    const entries = Object.entries(style);
+    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(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(Comp, { ref: setContainer, "data-najm-theme": preset ?? `${mode ?? "light"}-${accent ?? "neutral"}`, className, style, children }) }) });
+  return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: setContainer,
+      "data-najm-theme": preset ?? `${mode ?? "light"}-${accent ?? "neutral"}`,
+      className,
+      style,
+      children
+    }
+  ) }) }) });
+}
+
+// src/theme/borders.ts
+function resolveBorderDegree(borderDegree, bordered, globalBorderDegree, fallback = "default") {
+  if (borderDegree) return borderDegree;
+  if (bordered === true) return "strong";
+  if (bordered === false) return fallback;
+  return globalBorderDegree ?? fallback;
+}
+function borderColorClassForDegree(degree) {
+  switch (degree) {
+    case "none":
+      return "border-transparent";
+    case "subtle":
+      return "border-border-subtle";
+    case "strong":
+      return "border-border-strong";
+    default:
+      return "border-border";
+  }
+}
+function inputBorderColorClassForDegree(degree) {
+  switch (degree) {
+    case "none":
+      return "border-transparent";
+    case "subtle":
+      return "border-border-subtle";
+    case "strong":
+      return "border-border-strong";
+    default:
+      return "border-input";
+  }
+}
+function useResolvedBorderDegree(options = {}) {
+  const appearance = useNajmAppearance();
+  return resolveBorderDegree(
+    options.borderDegree,
+    options.bordered,
+    appearance.borderDegree,
+    options.fallback
+  );
+}
+function surfaceBorderClasses(degree) {
+  if (degree === "none") return "border border-transparent";
+  return `border ${borderColorClassForDegree(degree)}`;
 }
 var EDITABLE_INPUT_TYPES = /* @__PURE__ */ new Set([
   "text",
@@ -391,8 +464,8 @@ var NIcon = ({
     height: size,
     ...style
   };
-  if (React38__default.isValidElement(icon)) {
-    return React38__default.cloneElement(icon, {
+  if (React__default.isValidElement(icon)) {
+    return React__default.cloneElement(icon, {
       className: cn(className, icon.props.className),
       onClick,
       ...rest
@@ -510,7 +583,7 @@ function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
-var Button = React38.forwardRef(
+var Button = React.forwardRef(
   ({
     className,
     variant,
@@ -526,17 +599,23 @@ var Button = React38.forwardRef(
     loaderPosition = "left",
     leftIcon,
     rightIcon,
-    bordered = false,
+    bordered,
+    borderDegree,
     disabled,
     children,
     onClick,
     ...props
   }, ref) => {
-    const [pending, setPending] = React38.useState(false);
+    const [pending, setPending] = React.useState(false);
     const isLoading = loading || pending;
     const isDisabled = disabled || disabledWhileLoading && isLoading;
     const Comp = asChild ? Slot : "button";
-    const handleClick = React38.useCallback(
+    const resolvedBorderDegree = useResolvedBorderDegree({
+      borderDegree,
+      bordered,
+      fallback: "default"
+    });
+    const handleClick = React.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -565,12 +644,22 @@ var Button = React38.forwardRef(
         "data-slot": "button",
         "data-loading": isLoading || void 0,
         "data-disabled": isDisabled || void 0,
+        "data-border-degree": variant === "outline" || bordered || borderDegree ? resolvedBorderDegree : void 0,
         "aria-busy": isLoading || void 0,
         "aria-disabled": asChild && isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
         className: cn(
           buttonVariants({ variant, size, rounded, fullWidth }),
-          bordered && "border border-muted-foreground",
+          // Outline buttons always have a border; let the resolved degree drive its color.
+          variant === "outline" && borderColorClassForDegree(resolvedBorderDegree),
+          // Filled/ghost/plain/link/success/warning/info/soft/subtle buttons only get a
+          // border when the consumer explicitly opts in via `bordered` or `borderDegree`.
+          // We do NOT honor the global strong mode for these, because it would make every
+          // filled button look outlined.
+          variant !== "outline" && (bordered || borderDegree) && cn(
+            "border",
+            borderDegree ? borderColorClassForDegree(resolvedBorderDegree) : "border-muted-foreground"
+          ),
           className
         ),
         onClick: handleClick,
@@ -1032,27 +1121,28 @@ function SheetOverlay({ className, ...props }) {
   );
 }
 var sheetVariants = cva(
-  "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 fixed z-50 gap-4 shadow-lg transition ease-in-out",
+  "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 fixed z-50 gap-4 shadow-lg transition ease-in-out border-border",
   {
     variants: {
       side: {
-        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b border-border",
-        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t border-border",
-        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r border-border sm:max-w-sm",
-        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l border-border sm:max-w-sm"
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
       }
     },
     defaultVariants: { side: "right" }
   }
 );
 function SheetContent({ className, portalClassName, side, children, ...props }) {
+  const resolvedBorderDegree = useResolvedBorderDegree();
   return /* @__PURE__ */ jsx(SheetPortal, { children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
-        className: cn(sheetVariants({ side }), className),
+        className: cn(sheetVariants({ side }), borderColorClassForDegree(resolvedBorderDegree), className),
         ...props,
         children: [
           children,
@@ -1209,6 +1299,7 @@ function DialogOverlay({ className, ...props }) {
 }
 function DialogContent({ className, children, ...props }) {
   const portalClassName = useNPortalScope();
+  const resolvedBorderDegree = useResolvedBorderDegree();
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -1216,7 +1307,8 @@ function DialogContent({ className, children, ...props }) {
       {
         "data-slot": "dialog-content",
         className: cn(
-          "bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
+          "bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg duration-200",
+          borderColorClassForDegree(resolvedBorderDegree),
           className
         ),
         ...props,
@@ -1475,9 +1567,9 @@ 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(() => {
+  const [contentElement, setContentElement] = React__default.useState(null);
+  const [contentOwnsActions, setContentOwnsActions] = React__default.useState(false);
+  React__default.useLayoutEffect(() => {
     if (!contentElement) {
       setContentOwnsActions(false);
       return;
@@ -1624,8 +1716,8 @@ function NDirectDialog({
   closeOnPrimary = true,
   closeOnSecondary = true
 }) {
-  const [internalOpen, setInternalOpen] = React38__default.useState(defaultOpen);
-  const [primaryLoading, setPrimaryLoading] = React38__default.useState(false);
+  const [internalOpen, setInternalOpen] = React__default.useState(defaultOpen);
+  const [primaryLoading, setPrimaryLoading] = React__default.useState(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = (nextOpen) => {
@@ -1890,7 +1982,7 @@ function useDialog(store) {
         description: options.description,
         size: options.size || "sm",
         className: options.className,
-        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React38__default.createElement(NDeleteDialog, {
+        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React__default.createElement(NDeleteDialog, {
           itemName: options.itemName,
           itemType: options.itemType,
           icon: options.icon,
@@ -2088,7 +2180,7 @@ function DropdownMenuSubContent({ className, ...props }) {
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2 z-[10000] min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
         className
       ),
       ...props
@@ -2096,14 +2188,16 @@ function DropdownMenuSubContent({ className, ...props }) {
   );
 }
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-  const container = React38.useContext(NajmThemeContainerCtx);
+  const container = React.useContext(NajmThemeContainerCtx);
+  const resolvedBorderDegree = useResolvedBorderDegree();
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] min-w-[8rem] overflow-hidden rounded-md border border-border p-1 shadow-md",
+        borderColorClassForDegree(resolvedBorderDegree),
         className
       ),
       ...props
@@ -2173,7 +2267,8 @@ function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-  const container = React38.useContext(NajmThemeContainerCtx);
+  const container = React.useContext(NajmThemeContainerCtx);
+  const resolvedBorderDegree = useResolvedBorderDegree();
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
@@ -2181,7 +2276,8 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
       align,
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-none",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-border p-4 shadow-md outline-none",
+        borderColorClassForDegree(resolvedBorderDegree),
         className
       ),
       ...props
@@ -2221,13 +2317,13 @@ 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 }) {
-  const container = React38.useContext(NajmThemeContainerCtx);
+  const container = React.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[10000] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
         className
       ),
@@ -2261,7 +2357,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 = React38.forwardRef(
+var NativeSelect = React.forwardRef(
   ({ className, options, placeholder, value, ...props }, ref) => {
     const hasValue = value !== void 0 && value !== "";
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -2592,7 +2688,7 @@ function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 var tooltipContentVariants = cva(
-  "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) overflow-hidden rounded-md px-3 py-1.5 text-xs text-balance",
+  "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] w-fit origin-(--radix-tooltip-content-transform-origin) overflow-hidden rounded-md px-3 py-1.5 text-xs text-balance",
   {
     variants: {
       variant: {
@@ -2604,7 +2700,7 @@ var tooltipContentVariants = cva(
   }
 );
 function TooltipContent({ className, sideOffset = 4, variant, children, ...props }) {
-  const container = React38.useContext(NajmThemeContainerCtx);
+  const container = React.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
     {
@@ -2865,7 +2961,7 @@ function Avatar({
   ...props
 }) {
   const hasShortcut = src !== void 0 || fallback !== void 0;
-  const hasChildren = React38.Children.count(children) > 0;
+  const hasChildren = React.Children.count(children) > 0;
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
@@ -2959,9 +3055,9 @@ function AvatarGroup({ ring = true, className, children, ...props }) {
       "data-slot": "avatar-group",
       className: cn("flex -space-x-2", className),
       ...props,
-      children: ring ? React38.Children.map(children, (child) => {
-        if (React38.isValidElement(child) && child.type === Avatar) {
-          return React38.cloneElement(child, { ring: true, ...child.props });
+      children: ring ? React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === Avatar) {
+          return React.cloneElement(child, { ring: true, ...child.props });
         }
         return child;
       }) : children
@@ -3028,7 +3124,7 @@ function Swap({
   className,
   ...props
 }) {
-  const [internalChecked, setInternalChecked] = React38.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0 || controlledState !== void 0;
   const currentState = getDerivedState(
     isControlled ? controlledChecked ?? false : internalChecked,
@@ -3036,7 +3132,7 @@ function Swap({
   );
   const dataState = currentState === "indeterminate" ? "indeterminate" : currentState ? "on" : "off";
   const ariaPressed = currentState === "indeterminate" ? "mixed" : currentState;
-  const handleClick = React38.useCallback((event) => {
+  const handleClick = React.useCallback((event) => {
     onClick?.(event);
     if (event.defaultPrevented) return;
     if (disabled) return;
@@ -3240,7 +3336,7 @@ var sizeClasses = {
   md: "h-8 w-8",
   lg: "h-10 w-10"
 };
-var IconButton = React38.forwardRef(
+var IconButton = React.forwardRef(
   ({
     className,
     variant = "ghost",
@@ -3352,7 +3448,7 @@ var toneClasses = {
     ring: "border-primary/30"
   }
 };
-var StatusPill = React38.forwardRef(
+var StatusPill = React.forwardRef(
   ({ className, tone = "neutral", pulse = false, label, ...props }, ref) => {
     const c = toneClasses[tone];
     return /* @__PURE__ */ jsxs(
@@ -3410,20 +3506,20 @@ function Toaster({ ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React38.createContext({});
+var FormFieldContext = React.createContext({});
 var FormField = ({ ...props }) => /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 var useFormField = () => {
-  const fieldContext = React38.useContext(FormFieldContext);
-  const itemContext = React38.useContext(FormItemContext);
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.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 = React38.createContext({});
+var FormItemContext = React.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React38.useId();
+  const id = React.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 }) {
@@ -3567,7 +3663,7 @@ function NErrorState({ title = "Something went wrong", message, onRetry, retryLa
   ] });
 }
 function NEmptyState({ title = "No data", description, icon, action, className }) {
-  const iconContent = icon ? React38__default.isValidElement(icon) ? icon : React38__default.createElement(icon, { className: "h-8 w-8" }) : null;
+  const iconContent = icon ? React__default.isValidElement(icon) ? icon : React__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: [
@@ -3577,7 +3673,7 @@ function NEmptyState({ title = "No data", description, icon, action, className }
     action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
   ] });
 }
-var NErrorBoundary = class extends React38__default.Component {
+var NErrorBoundary = class extends React__default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -3823,18 +3919,24 @@ function NCard({
   onRetry,
   noPadding = false,
   separator = false,
-  bordered = false,
+  bordered,
+  borderDegree,
   className,
   classNames,
   onClick
 }) {
   const isEmpty = empty ?? noData ?? false;
   const resolvedEmptyText = emptyText ?? noDataText ?? "No data available";
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
   let actionSlot = null;
   let footerSlot = null;
   const mainChildren = [];
-  React38__default.Children.forEach(children, (child) => {
-    if (React38__default.isValidElement(child)) {
+  React__default.Children.forEach(children, (child) => {
+    if (React__default.isValidElement(child)) {
       if (child.type === NCardAction) {
         actionSlot = child;
       } else if (child.type === NCardFooter) {
@@ -3848,15 +3950,18 @@ function NCard({
   });
   const hasHeader = !!(title || description || actionSlot);
   const iconSize = description ? "h-8 w-8" : "h-5 w-5";
+  const isStrong = resolvedBorderDegree === "strong";
+  const isNone = resolvedBorderDegree === "none";
   return /* @__PURE__ */ jsxs(
     Card,
     {
       "data-bordered": bordered ? "true" : void 0,
+      "data-border-degree": resolvedBorderDegree,
       onClick,
       className: cn(
         "flex flex-col",
         !noPadding && "p-4 gap-3",
-        bordered && "border border-muted-foreground shadow-none",
+        isNone ? "border-transparent" : `${borderColorClassForDegree(resolvedBorderDegree)} ${isStrong ? "shadow-none" : ""}`,
         classNames?.root,
         className
       ),
@@ -3871,7 +3976,7 @@ function NCard({
           ] }),
           actionSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0 ml-2", children: actionSlot })
         ] }),
-        hasHeader && separator && /* @__PURE__ */ jsx("div", { className: "border-t" }),
+        hasHeader && separator && /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
         /* @__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,
           {
@@ -3879,7 +3984,7 @@ function NCard({
             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 })
+        footerSlot && /* @__PURE__ */ jsx(CardFooter, { className: cn("p-0 pt-3 border-t border-border mt-auto", classNames?.footer), children: footerSlot })
       ]
     }
   );
@@ -4045,6 +4150,7 @@ function DefaultCard({
   change,
   onClick,
   bordered,
+  borderDegree,
   className,
   classNames
 }) {
@@ -4054,6 +4160,7 @@ function DefaultCard({
       noPadding: true,
       onClick,
       bordered,
+      borderDegree,
       className: cn(
         "group p-4 transition-colors",
         onClick && "cursor-pointer hover:border-border/60 hover:bg-accent/40",
@@ -4110,6 +4217,7 @@ function UsageCard({
   countLabel,
   onClick,
   bordered,
+  borderDegree,
   className,
   classNames
 }) {
@@ -4121,6 +4229,7 @@ function UsageCard({
       noPadding: true,
       onClick,
       bordered,
+      borderDegree,
       className: cn(
         "group min-h-[116px] px-4 py-4 transition-colors",
         onClick && "cursor-pointer hover:bg-accent/30",
@@ -4165,13 +4274,14 @@ function UsageCard({
     }
   );
 }
-function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, className, classNames }) {
+function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, borderDegree, className, classNames }) {
   return /* @__PURE__ */ jsxs(
     NCard,
     {
       noPadding: true,
       onClick,
       bordered,
+      borderDegree,
       className: cn(
         !bordered && "border-0",
         "bg-foreground/10 p-3 shadow-none",
@@ -4360,7 +4470,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
       role: "menu",
       "data-context-menu": true,
       className: cn(
-        "fixed z-50 w-48 rounded-lg border border-border bg-popover py-1 shadow-xl text-popover-foreground",
+        "fixed z-[10000] w-48 rounded-lg border border-border bg-popover py-1 shadow-xl text-popover-foreground",
         className
       ),
       style: { left: pos.left, top: pos.top },
@@ -4368,7 +4478,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
       children: items.map((item) => {
         const Icon2 = item.icon;
         const hasSub = !!item.submenu?.length;
-        return /* @__PURE__ */ jsxs(React38__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/60" }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -4989,188 +5099,6 @@ function NFolderIcon({ size = "md", className }) {
   const iconSize = size === "xl" ? 72 : size === "lg" ? 56 : size === "md" ? 28 : 18;
   return /* @__PURE__ */ jsx("span", { className: cn(dim, "inline-flex shrink-0 items-center justify-center", className), children: /* @__PURE__ */ jsx(Folder, { size: iconSize, className: "text-sky-500", fill: "currentColor", strokeWidth: 1.5 }) });
 }
-function formatBytes2(bytes) {
-  if (!bytes && bytes !== 0) return "";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(0)} KB`;
-  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
-  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
-}
-function NUploader({
-  title = "Upload Files",
-  subtitle,
-  accept,
-  multiple = true,
-  disabled = false,
-  items = [],
-  listTitle = "Uploaded files",
-  className,
-  dropzoneClassName,
-  onFilesSelected,
-  onCancel,
-  onRemove
-}) {
-  const inputRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const emit = useCallback(
-    (files) => {
-      if (!files || disabled) return;
-      const arr = Array.from(files);
-      if (arr.length) onFilesSelected?.(arr);
-    },
-    [disabled, onFilesSelected]
-  );
-  const onDragOver = (e) => {
-    e.preventDefault();
-    if (!disabled) setIsDragging(true);
-  };
-  const onDragLeave = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-  const onDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    emit(e.dataTransfer.files);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      title && /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold uppercase tracking-wide text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "button",
-        tabIndex: disabled ? -1 : 0,
-        "aria-disabled": disabled,
-        onClick: () => !disabled && inputRef.current?.click(),
-        onKeyDown: (e) => {
-          if (!disabled && (e.key === "Enter" || e.key === " ")) {
-            e.preventDefault();
-            inputRef.current?.click();
-          }
-        },
-        onDragOver,
-        onDragLeave,
-        onDrop,
-        className: cn(
-          "flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed px-6 py-10 text-center transition-colors",
-          "border-border bg-muted/40 hover:bg-muted/60",
-          isDragging && "border-primary bg-primary/5",
-          disabled && "cursor-not-allowed opacity-60",
-          !disabled && "cursor-pointer",
-          dropzoneClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              accept,
-              multiple,
-              className: "hidden",
-              onChange: (e) => {
-                emit(e.target.files);
-                e.target.value = "";
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(UploadCloud, { className: "h-7 w-7" }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Drag & Drop your files here" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-wider text-muted-foreground/70", children: "or" }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              size: "sm",
-              disabled,
-              onClick: (e) => {
-                e.stopPropagation();
-                inputRef.current?.click();
-              },
-              children: "Browse Files"
-            }
-          )
-        ]
-      }
-    ),
-    items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      listTitle && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: listTitle }),
-      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsx(
-        UploaderRow,
-        {
-          item,
-          onCancel,
-          onRemove
-        },
-        item.id
-      )) })
-    ] })
-  ] });
-}
-function UploaderRow({ item, onCancel, onRemove }) {
-  const status = item.status ?? "uploading";
-  const progress = Math.max(0, Math.min(100, item.progress ?? 0));
-  const isDone = status === "done";
-  const isError = status === "error";
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      className: cn(
-        "flex items-center gap-3 rounded-xl border bg-card px-3 py-2.5 shadow-sm",
-        isError ? "border-destructive/30" : "border-border"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          NFileTypeIcon,
-          {
-            mimeType: item.mimeType,
-            fileName: item.name,
-            size: "md"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.name }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "shrink-0 text-xs tabular-nums",
-                  isError ? "text-destructive" : "text-muted-foreground"
-                ),
-                children: isDone ? formatBytes2(item.size) : isError ? "Failed" : `${Math.round(progress)}%`
-              }
-            )
-          ] }),
-          !isDone && !isError && /* @__PURE__ */ jsx(Progress, { value: progress, className: "h-1.5" }),
-          isError && item.error && /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", children: item.error })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: isDone ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-emerald-500" }) : isError ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Remove",
-            onClick: () => onRemove?.(item.id),
-            className: "rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-            children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-destructive" })
-          }
-        ) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Cancel upload",
-            onClick: () => onCancel?.(item.id),
-            className: "rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-          }
-        ) })
-      ]
-    }
-  );
-}
 var NO_SHADE = /* @__PURE__ */ new Set(["black", "white"]);
 var PRESETS = {
   muted: "border-muted-foreground",
@@ -5199,23 +5127,42 @@ var inputVariants = cva(
     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) => {
+var FOCUS_INTERACTIVE_BASE = "border focus-within:border-primary";
+var HOVER_INTERACTIVE_BASE = "hover:border-primary";
+var STATIC_BASE = "border";
+var BaseInput = React__default.forwardRef(
+  ({ children, variant = "default", status = "default", bordered, borderDegree, 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`) : "";
+    const resolvedBorderDegree = useResolvedBorderDegree({
+      borderDegree,
+      bordered,
+      fallback: "default"
+    });
+    const hasExplicitColor = !!borderColor;
+    let colorClass = "";
+    let borderClass = "";
+    if (!isGhost) {
+      if (isError) {
+        borderClass = ERROR_BORDER;
+      } else if (hasExplicitColor) {
+        borderClass = `${STATIC_BASE} ${FOCUS_INTERACTIVE_BASE} ${HOVER_INTERACTIVE_BASE}`;
+        colorClass = PRESETS[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
+      } else {
+        const restingBorderClass = inputBorderColorClassForDegree(resolvedBorderDegree);
+        borderClass = resolvedBorderDegree === "default" ? `${STATIC_BASE} ${restingBorderClass} hover:border-input focus-within:border-primary/70` : `${STATIC_BASE} ${restingBorderClass} focus-within:border-primary/70`;
+      }
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
+        "data-border-degree": isGhost ? void 0 : resolvedBorderDegree,
         className: cn(
           inputVariants({ variant, status, hasIcon, disabled }),
-          showBorder && (isError ? ERROR_BORDER : BORDER_INTERACTIVE),
-          showBorder && colorClass,
+          !isGhost && borderClass,
+          !isGhost && colorClass,
           className
         ),
         onMouseEnter: disabled ? void 0 : onHover,
@@ -5236,33 +5183,33 @@ function resolveIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { icon, size: 16 });
 }
-var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor, disabled = false, ...props }) => {
+var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, disabled = false, ...props }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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", bordered = false, borderColor }) => {
+var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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", bordered = false, borderColor }) => {
+var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, 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, bordered, borderColor, className: cn("gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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", bordered = false, borderColor, rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
+var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
   Textarea,
   {
     rows,
@@ -5279,7 +5226,7 @@ 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", bordered = false, borderColor, disabled = false }) => {
+var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, disabled = false }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon && !value;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const displayLabel = value ? (() => {
@@ -5287,7 +5234,7 @@ var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, i
     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: [
+    /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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" })
@@ -5305,7 +5252,7 @@ var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, i
     ] }, String(value))
   ] });
 };
-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 }) => {
+var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderDegree, 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);
@@ -5325,7 +5272,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     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: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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" })
@@ -5364,7 +5311,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     ] }) })
   ] });
 };
-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 }) => {
+var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderDegree, 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");
@@ -5378,7 +5325,7 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
   const displayedItems = value.slice(0, maxDisplay);
   const remainingCount = value.length - maxDisplay;
   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: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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: [
@@ -5412,7 +5359,7 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
   ] });
 };
 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", 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) => {
+var RadioGroupInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, layout = "row", items }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, 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: [
@@ -5420,7 +5367,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", bordered = false, borderColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex gap-2 items-center", className), children: [
+var CheckboxInput = ({ value, onChange, helper, label, checkboxClassName, className, variant = "default", status = "default", bordered, borderDegree, borderColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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 }),
@@ -5444,7 +5391,8 @@ function CheckboxGroupInput({
   className,
   variant = "default",
   status = "default",
-  bordered = false,
+  bordered,
+  borderDegree,
   borderColor,
   disabled = false
 }) {
@@ -5452,7 +5400,7 @@ function CheckboxGroupInput({
     const next = checked ? [...value, itemValue] : value.filter((v) => v !== itemValue);
     onChange(next);
   };
-  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) => {
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, 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);
@@ -5469,7 +5417,7 @@ function CheckboxGroupInput({
     ] }, itemValue);
   }) }) });
 }
-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: [
+var SwitchInput = ({ value, onChange, label = "", helper, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, icon, showIcon = true, iconPosition = "label", iconColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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) }),
@@ -5482,10 +5430,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", bordered = false, borderColor }) => {
+var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const toDateString = (date) => date?.toISOString().split("T")[0];
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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" }) })
@@ -5500,7 +5448,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", bordered = false, borderColor }) => {
+var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
   const fileInputRef = useRef(null);
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const displayFilename = () => {
@@ -5508,7 +5456,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, bordered, borderColor, className: cn("flex px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, 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) })),
@@ -5517,6 +5465,195 @@ var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIc
     /* @__PURE__ */ jsx(Label, { className: "ml-2 flex-1", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
   ] });
 };
+function formatBytes2(bytes) {
+  if (!bytes && bytes !== 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(0)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+function NUploader({
+  title = "Upload Files",
+  subtitle,
+  accept,
+  multiple = true,
+  disabled = false,
+  items = [],
+  listTitle = "Uploaded files",
+  className,
+  dropzoneClassName,
+  borderDegree,
+  onFilesSelected,
+  onCancel,
+  onRemove
+}) {
+  const inputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    fallback: "default"
+  });
+  const dropzoneBorderClass = borderColorClassForDegree(resolvedBorderDegree);
+  const emit = useCallback(
+    (files) => {
+      if (!files || disabled) return;
+      const arr = Array.from(files);
+      if (arr.length) onFilesSelected?.(arr);
+    },
+    [disabled, onFilesSelected]
+  );
+  const onDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+  const onDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    emit(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold uppercase tracking-wide text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        onClick: () => !disabled && inputRef.current?.click(),
+        onKeyDown: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        },
+        onDragOver,
+        onDragLeave,
+        onDrop,
+        className: cn(
+          "flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed px-6 py-10 text-center transition-colors",
+          dropzoneBorderClass,
+          "bg-muted/40 hover:bg-muted/60",
+          isDragging && "border-primary bg-primary/5",
+          disabled && "cursor-not-allowed opacity-60",
+          !disabled && "cursor-pointer",
+          dropzoneClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              className: "hidden",
+              onChange: (e) => {
+                emit(e.target.files);
+                e.target.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(UploadCloud, { className: "h-7 w-7" }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Drag & Drop your files here" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-wider text-muted-foreground/70", children: "or" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              disabled,
+              onClick: (e) => {
+                e.stopPropagation();
+                inputRef.current?.click();
+              },
+              children: "Browse Files"
+            }
+          )
+        ]
+      }
+    ),
+    items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      listTitle && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: listTitle }),
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsx(
+        UploaderRow,
+        {
+          item,
+          onCancel,
+          onRemove
+        },
+        item.id
+      )) })
+    ] })
+  ] });
+}
+function UploaderRow({ item, onCancel, onRemove }) {
+  const status = item.status ?? "uploading";
+  const progress = Math.max(0, Math.min(100, item.progress ?? 0));
+  const isDone = status === "done";
+  const isError = status === "error";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-xl border bg-card px-3 py-2.5 shadow-sm",
+        isError ? "border-destructive/30" : "border-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          NFileTypeIcon,
+          {
+            mimeType: item.mimeType,
+            fileName: item.name,
+            size: "md"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.name }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 text-xs tabular-nums",
+                  isError ? "text-destructive" : "text-muted-foreground"
+                ),
+                children: isDone ? formatBytes2(item.size) : isError ? "Failed" : `${Math.round(progress)}%`
+              }
+            )
+          ] }),
+          !isDone && !isError && /* @__PURE__ */ jsx(Progress, { value: progress, className: "h-1.5" }),
+          isError && item.error && /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", children: item.error })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: isDone ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-emerald-500" }) : isError ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove",
+            onClick: () => onRemove?.(item.id),
+            className: "rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-destructive" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Cancel upload",
+            onClick: () => onCancel?.(item.id),
+            className: "rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        ) })
+      ]
+    }
+  );
+}
 var IMAGE_SIZE_MAP = {
   sm: "w-16 h-16",
   md: "w-24 h-24",
@@ -5637,14 +5774,14 @@ function ImageInput({
     renderFileInput()
   ] });
 }
-var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default", bordered = false, borderColor }) => {
+var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default", bordered, borderDegree, 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, bordered, borderColor, className: cn("gap-2", className), children: stars });
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, 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", bordered = false, borderColor, colors = DEFAULT_COLORS }) => {
+var ColorArrayInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, colors = DEFAULT_COLORS }) => {
   const [selectedColor, setSelectedColor] = useState(value || "");
-  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: () => {
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, 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)) });
@@ -5678,7 +5815,8 @@ function ColorPickerInput({
   className,
   variant = "default",
   status = "default",
-  bordered = false,
+  bordered,
+  borderDegree,
   borderColor,
   disabled = false
 }) {
@@ -5689,6 +5827,7 @@ function ColorPickerInput({
       variant,
       status,
       bordered,
+      borderDegree,
       borderColor,
       className: cn("flex-col gap-3 items-start p-3", className),
       disabled,
@@ -5776,7 +5915,8 @@ function EmojiInput({
   className,
   variant = "default",
   status = "default",
-  bordered = false,
+  bordered,
+  borderDegree,
   borderColor,
   disabled = false
 }) {
@@ -5786,6 +5926,7 @@ function EmojiInput({
       variant,
       status,
       bordered,
+      borderDegree,
       borderColor,
       className: cn("gap-3 flex-wrap", className),
       disabled,
@@ -5856,7 +5997,8 @@ function PhoneInput({
   className,
   variant = "default",
   status = "default",
-  bordered = false,
+  bordered,
+  borderDegree,
   borderColor
 }) {
   const phoneThemeVars = {
@@ -5881,7 +6023,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, bordered, borderColor, className: cn("gap-0 overflow-visible p-0!", className), disabled, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-0 overflow-visible p-0!", className), disabled, children: /* @__PURE__ */ jsx(
     PhoneInput$1,
     {
       className: "w-full",
@@ -5931,6 +6073,7 @@ function PhoneInput({
           style: {
             zIndex: 60,
             width: "min(300px, calc(100vw - 32px))",
+            backgroundColor: "hsl(var(--najm-popover))",
             border: "1px solid hsl(var(--najm-border))",
             borderRadius: "8px",
             overflowX: "hidden"
@@ -5941,7 +6084,7 @@ function PhoneInput({
     }
   ) });
 }
-var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered = false, borderColor, format24 = true, showSeconds = false, disabled = false }) => {
+var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, format24 = true, showSeconds = false, disabled = false }) => {
   const [inputValue, setInputValue] = useState(value);
   const [isValid, setIsValid] = useState(true);
   useEffect(() => {
@@ -5989,7 +6132,7 @@ 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, bordered, borderColor, className: cn("gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status: currentStatus, bordered, borderDegree, 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();
@@ -6074,8 +6217,8 @@ function NSlider({
     return Array.isArray(v) ? [...v] : [v];
   };
   const initialRadix = toRadix(controlledValue ?? defaultValue);
-  const [internalValues, setInternalValues] = React38.useState(initialRadix);
-  const [active, setActive] = React38.useState(null);
+  const [internalValues, setInternalValues] = React.useState(initialRadix);
+  const [active, setActive] = React.useState(null);
   const currentValues = controlledValue !== void 0 ? toRadix(controlledValue) : internalValues;
   const handleRadix = (arr) => {
     setInternalValues(arr);
@@ -6265,19 +6408,19 @@ function Combobox({
   allowFreeText = false,
   disabled = false
 }) {
-  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 [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [highlight, setHighlight] = React.useState(0);
+  const wrapperRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const filtered = React.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]);
-  React38.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -6288,7 +6431,7 @@ function Combobox({
     document.addEventListener("mousedown", onClick);
     return () => document.removeEventListener("mousedown", onClick);
   }, [open]);
-  React38.useEffect(() => {
+  React.useEffect(() => {
     if (open) {
       setHighlight(0);
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -6296,7 +6439,7 @@ function Combobox({
       setQuery("");
     }
   }, [open]);
-  const selectedLabel = React38.useMemo(() => {
+  const selectedLabel = React.useMemo(() => {
     const match = options.find((o) => o.value === value);
     return match?.label ?? value;
   }, [options, value]);
@@ -6358,7 +6501,7 @@ function Combobox({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute z-[10000] mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
         /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
@@ -6417,12 +6560,13 @@ var VARIANT_PRESETS = {
     error: "text-xs"
   }
 };
-var VariantContext = createContext({ variant: "default", bordered: false });
-var VariantProvider = ({ variant = "default", bordered = false, children }) => /* @__PURE__ */ jsx(VariantContext.Provider, { value: { variant, bordered }, children });
+var VariantContext = createContext({ variant: "default" });
+var VariantProvider = ({ variant = "default", bordered, borderDegree, children }) => /* @__PURE__ */ jsx(VariantContext.Provider, { value: { variant, bordered, borderDegree }, children });
 var useVariant = () => useContext(VariantContext).variant;
 var useBordered = () => useContext(VariantContext).bordered;
+var useBorderDegree = () => useContext(VariantContext).borderDegree;
 var useVariantPreset = () => VARIANT_PRESETS[useContext(VariantContext).variant];
-function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", bordered = false, as = "form", className = "", id, devTools, children }) {
+function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", bordered, borderDegree, as = "form", className = "", id, devTools, children }) {
   const resolver = useMemo(() => schema ? zodResolver(schema) : void 0, [schema]);
   const internalForm = useForm({
     resolver,
@@ -6452,9 +6596,9 @@ function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, varia
       console.log("Form errors:", form.formState.errors);
     }
   }, [form.formState.errors]);
-  const wrapperClass = cn("flex flex-col h-full w-full gap-2", className);
+  const wrapperClass = cn("flex flex-col h-full w-full gap-4", className);
   const submit = form.handleSubmit(onSubmit);
-  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) => {
+  const inner = /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, borderDegree, 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();
@@ -6517,6 +6661,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
   const prefix = usePrefix();
   const preset = useVariantPreset();
   const contextBordered = useBordered();
+  const contextBorderDegree = useBorderDegree();
   const fieldName = prefix ? `${prefix}.${name}` : name;
   if (!InputComponent) return null;
   const getDefaultValue = () => {
@@ -6547,7 +6692,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
         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", bordered: contextBordered, 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, borderDegree: contextBorderDegree, 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 })
     ] });
@@ -6877,7 +7022,8 @@ function WizardForm({
   previousLabel = "Previous",
   submitLabel = "Submit",
   variant = "default",
-  bordered = false,
+  bordered,
+  borderDegree,
   className,
   classNames,
   footerSlot
@@ -6937,7 +7083,7 @@ function WizardForm({
             classNames
           }
         ),
-        /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, borderDegree, children: /* @__PURE__ */ jsxs(
           "form",
           {
             id: `step-${currentStepConfig.id}`,
@@ -6971,12 +7117,18 @@ var handler = {
   }
 };
 useTableStore.use = new Proxy({}, handler);
-var actionButtonClass = (bordered, danger) => cn(
+var actionButtonClass = (bordered, danger, borderClass) => 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"
+  bordered && `border ${borderClass ?? "border-muted-foreground"}`
 );
-function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }) {
+function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered, borderDegree }) {
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const borderClass = borderColorClassForDegree(resolvedBorderDegree);
   if (menuButton && openRowMenu) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
       "button",
@@ -6999,7 +7151,7 @@ function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButto
         type: "button",
         "aria-label": "View",
         onClick: () => onView(row.original),
-        className: actionButtonClass(bordered),
+        className: actionButtonClass(bordered, false, borderClass),
         children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
       }
     ),
@@ -7009,7 +7161,7 @@ function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButto
         type: "button",
         "aria-label": "Edit",
         onClick: () => onEdit(row.original),
-        className: actionButtonClass(bordered),
+        className: actionButtonClass(bordered, false, borderClass),
         children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
       }
     ),
@@ -7019,7 +7171,7 @@ function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButto
         type: "button",
         "aria-label": "Delete",
         onClick: () => onDelete(row.original),
-        className: actionButtonClass(bordered, true),
+        className: actionButtonClass(bordered, true, borderClass),
         children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
       }
     )
@@ -7094,7 +7246,8 @@ var createTableStore = () => {
     CardComponent: null,
     className: "",
     classNames: {},
-    bordered: false,
+    bordered: void 0,
+    borderDegree: void 0,
     headerClassName: "bg-card",
     headerColor: "primary",
     showCheckbox: true,
@@ -7348,6 +7501,7 @@ function useTable() {
   const openRowMenu = useTableStore.use.openRowMenu();
   const menuButton = useTableStore.use.menuButton();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   const CardComponent = useTableStore.use.CardComponent();
   const dynamicHeight = useTableStore.use.dynamicHeight();
   const viewMode = useTableStore.use.viewMode();
@@ -7377,15 +7531,15 @@ function useTable() {
         ...effectiveColumns,
         {
           id: "actions",
-          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 }),
+          header: () => isMenuActions ? null : React__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
+          cell: ({ row }) => React__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered, borderDegree }),
           enableSorting: false,
           enableHiding: false
         }
       ];
     }
     return effectiveColumns;
-  }, [columns, CardComponent, hasActions, onView, onEdit, onDelete, openRowMenu, menuButton, bordered]);
+  }, [columns, CardComponent, hasActions, onView, onEdit, onDelete, openRowMenu, menuButton, bordered, borderDegree]);
   const notifyStateChange = useCallback((state) => {
     onStateChange?.(state);
   }, [onStateChange]);
@@ -7532,10 +7686,10 @@ function EditableCell({ cell, onCellEdit }) {
   const columnId = cell.column.id;
   const editor = meta.editor || "text";
   const initial = cell.getValue();
-  const [editing, setEditing] = React38__default.useState(false);
-  const [value, setValue] = React38__default.useState(initial);
-  const [saving, setSaving] = React38__default.useState(false);
-  React38__default.useEffect(() => {
+  const [editing, setEditing] = React__default.useState(false);
+  const [value, setValue] = React__default.useState(initial);
+  const [saving, setSaving] = React__default.useState(false);
+  React__default.useEffect(() => {
     if (!editing) setValue(initial);
   }, [initial, editing]);
   const commit = async (next) => {
@@ -7596,6 +7750,15 @@ function NTableContent({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const tableBorderClass = borderColorClassForDegree(resolvedBorderDegree);
+  const isStrong = resolvedBorderDegree === "strong";
+  const useDegreeBorder = bordered || borderDegree || resolvedBorderDegree !== "default";
   const showCheckbox = useTableStore.use.showCheckbox();
   const selectedRowId = useTableStore.use.selectedRowId();
   const renderSubRow = useTableStore.use.renderSubRow();
@@ -7618,100 +7781,124 @@ 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(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",
-          checked: table.getIsAllPageRowsSelected(),
-          onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
-        }
-      ) }),
-      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))
-    ] }, 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(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) => {
-              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,
-                {
-                  "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: 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 }),
-              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 }) }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    NajmScroll,
+    {
+      axis: "both",
+      "data-border-degree": resolvedBorderDegree,
+      className: cn(
+        "min-h-0 flex-1 overflow-hidden rounded-md bg-card",
+        useDegreeBorder ? `border ${tableBorderClass}` : "shadow-sm",
+        isStrong && "shadow-none",
+        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-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: cn("hover:bg-transparent", bordered && "border-border"), children: [
+          showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12", colorStyle?.bg), 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: 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))
+        ] }, 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(React__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) => {
+                  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,
+                    {
+                      "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: cn(
+                        "flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
+                        bordered && `border ${tableBorderClass}`
+                      ),
+                      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 }) }) })
+      ] })
+    }
+  );
 }
-function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered = false }) {
+function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered, borderDegree }) {
   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;
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const isStrong = resolvedBorderDegree === "strong";
+  const isNone = resolvedBorderDegree === "none";
+  const borderClass = borderColorClassForDegree(resolvedBorderDegree);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-row": "true",
       "data-row-id": row.id,
+      "data-border-degree": resolvedBorderDegree,
       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"),
+        isNone ? "border-transparent" : `border ${borderClass}`,
+        isStrong && "shadow-none",
+        isActive && (bordered || resolvedBorderDegree !== "default" || borderDegree ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
         onClick && "cursor-pointer",
         className
       ),
@@ -7806,7 +7993,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
             },
             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"
+              bordered && `border ${borderClass}`
             ),
             children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
           }
@@ -7843,6 +8030,7 @@ function NTableCards({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   const renderSubRow = useTableStore.use.renderSubRow();
   const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
   const handleContainerContextMenu = useCallback((e) => {
@@ -7945,6 +8133,7 @@ function NTableCards({ effectiveMode }) {
         openRowMenu,
         menuButton,
         bordered,
+        borderDegree,
         children: /* @__PURE__ */ jsx(
           CardComponent,
           {
@@ -7975,6 +8164,13 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const triggerBorderClass = borderColorClassForDegree(resolvedBorderDegree);
   if (!table || !showContent || !showPagination || viewMode === "json" || viewMode === "files") return null;
   const filteredRows = table.getFilteredRowModel().rows;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
@@ -8009,7 +8205,7 @@ 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: cn("h-8 w-[80px]", bordered && "border-muted-foreground"), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: cn("h-8 w-[80px]", bordered && triggerBorderClass), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
           /* @__PURE__ */ jsx(SelectContent, { side: "top", children: currentPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
         ] })
       ] }),
@@ -8037,25 +8233,28 @@ function NTablePagination() {
 function SearchFilter({ placeholder }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   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 });
+  return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered, borderDegree });
 }
 function TextFilter({ name, placeholder }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   const column = table?.getColumn?.(name);
   if (!column) return null;
-  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
+  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered, borderDegree });
 }
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   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...", bordered });
+  return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered, borderDegree });
 }
 function defaultWrapperClass(filter) {
   return filter.type === "search" ? "flex-1 min-w-[160px] max-w-sm" : "w-full sm:w-40 shrink-0";
@@ -8063,6 +8262,7 @@ function defaultWrapperClass(filter) {
 function RenderFilter({ filter }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   if (filter.type === "search") {
     return /* @__PURE__ */ jsx(SearchFilter, { placeholder: filter.placeholder });
   }
@@ -8074,6 +8274,7 @@ function RenderFilter({ filter }) {
         onChange: filter.onChange,
         placeholder: filter.placeholder,
         bordered,
+        borderDegree,
         className: "w-full"
       }
     );
@@ -8087,6 +8288,7 @@ function RenderFilter({ filter }) {
           onChange: filter.onChange,
           placeholder: filter.placeholder,
           bordered,
+          borderDegree,
           className: "w-full"
         }
       );
@@ -8105,6 +8307,7 @@ function RenderFilter({ filter }) {
           showIcon: true,
           disabled: filter.disabled,
           bordered,
+          borderDegree,
           className: "w-full"
         }
       );
@@ -8120,6 +8323,7 @@ function RenderFilter({ filter }) {
         showIcon: true,
         disabled: filter.disabled,
         bordered,
+        borderDegree,
         className: "w-full"
       }
     );
@@ -8148,6 +8352,12 @@ function TableAddButton() {
   const addButtonText = useTableStore.use.addButtonText();
   const headerColor = useTableStore.use.headerColor();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
   if (!showAddButton) return null;
   const accentHex = headerColor ? HEADER_HEX[headerColor] : void 0;
   const btnStyle = accentHex ? { backgroundColor: accentHex } : void 0;
@@ -8161,6 +8371,7 @@ function TableAddButton() {
       style: btnStyle,
       "aria-label": addButtonText || "Create",
       title: addButtonText || "Create",
+      "data-border-degree": bordered ? resolvedBorderDegree : void 0,
       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" })
     }
@@ -8177,6 +8388,7 @@ function TableSettingsMenu() {
   const cardComponent = useTableStore.use.CardComponent();
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const borderDegree = useTableStore.use.borderDegree();
   if (!showViewToggle && !showColumnVisibility) return null;
   const allModes = ["table", "cards", "json", "files"];
   const filteredModes = availableModes ?? allModes;
@@ -8195,7 +8407,7 @@ function TableSettingsMenu() {
   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__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BaseInput, { className: "w-auto cursor-pointer px-3", onClick: (e) => e.preventDefault(), bordered, borderDegree, 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: [
@@ -8521,7 +8733,8 @@ function NTable(props) {
     CardComponent: props.renderCard ?? null,
     className: props.className ?? "",
     classNames: props.classNames ?? {},
-    bordered: props.bordered ?? false,
+    bordered: props.bordered,
+    borderDegree: props.borderDegree,
     headerClassName: props.headerClassName ?? "bg-card",
     headerColor: props.headerColor ?? "primary",
     showCheckbox: props.showCheckbox ?? true,
@@ -8956,7 +9169,11 @@ 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 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 gap-2 justify-start",
+    classNames?.sidebarHeader,
+    className
+  ), children });
 }
 function NSidebarLogo({
   icon,
@@ -8966,19 +9183,27 @@ function NSidebarLogo({
   collapsed = false
 }) {
   if (!icon && !title && !subtitle) return null;
-  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;
+  const IconNode = React__default.isValidElement(icon) ? icon : typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon ? React__default.createElement(icon, { className: "h-6 w-6 text-primary" }) : icon;
+  const collapsedCenter = collapsed ? { marginLeft: "calc(var(--rail, 4rem) / 2 - 2.25rem)" } : void 0;
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick,
       className: cn(
-        "flex items-center gap-2.5 min-w-0 text-left",
+        "flex items-center gap-2.5  text-left",
         onClick && "cursor-pointer hover:opacity-80 transition-opacity"
       ),
       children: [
-        IconNode && /* @__PURE__ */ jsx("div", { className: "size-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0", children: IconNode }),
-        !collapsed && (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+        IconNode && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+            style: collapsedCenter,
+            children: IconNode
+          }
+        ),
+        !collapsed && (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col ", children: [
           title && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground leading-tight truncate", children: title }),
           subtitle && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground leading-tight truncate", children: subtitle })
         ] })
@@ -9015,6 +9240,7 @@ function NSidebarItem({
   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",
+    collapsed && "pl-[calc(var(--rail,4rem)/2_-_1.5rem)]",
     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
   );
@@ -9226,9 +9452,18 @@ function NSidebarMobile({
   hamburgerClassName,
   showHamburgerButton = true,
   children,
-  bordered = false
+  bordered,
+  borderDegree
 }) {
   const mobileClass = mobileBreakpoint === "sm" ? "sm:hidden" : mobileBreakpoint === "lg" ? "lg:hidden" : "md:hidden";
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const isStrong = resolvedBorderDegree === "strong";
+  const isNone = resolvedBorderDegree === "none";
+  const mobileBorderClass = isNone ? "border-transparent" : borderColorClassForDegree(resolvedBorderDegree);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showHamburgerButton && /* @__PURE__ */ jsx(
       "button",
@@ -9256,9 +9491,11 @@ function NSidebarMobile({
     /* @__PURE__ */ jsxs(
       "aside",
       {
+        "data-border-degree": resolvedBorderDegree,
         className: cn(
           "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",
+          // When global strong is on, we want a strong border, not a soft `border-r` edge.
+          isStrong ? `border ${mobileBorderClass} shadow-none` : isNone ? "border-transparent" : `border-r ${mobileBorderClass}`,
           mobileClass,
           open ? "translate-x-0" : "-translate-x-full"
         ),
@@ -9305,10 +9542,12 @@ function NSidebar({
   defaultCollapsed = false,
   onCollapsedChange,
   showCollapseButton = true,
+  collapseButtonPosition = "footer",
   showSectionLabels = true,
   showSectionIcons = true,
   showSectionSeparators = false,
-  bordered = false,
+  bordered,
+  borderDegree,
   footer,
   className,
   classNames,
@@ -9352,10 +9591,20 @@ function NSidebar({
     if (closeOnNavigate) setMobileOpen(false);
   }, [onNavigate, closeOnNavigate]);
   const groups = useMemo(() => buildGroups(navItems), [navItems]);
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const sidebarShellBorderClass = borderColorClassForDegree(resolvedBorderDegree);
+  const isStrong = resolvedBorderDegree === "strong";
+  const isNone = resolvedBorderDegree === "none";
   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 railVar = typeof collapsedWidth === "number" ? `${collapsedWidth}px` : collapsedWidth;
+  const showEdgeCollapse = showCollapseButton && collapseButtonPosition === "edge";
   const defaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed }) : null;
   const headerContent = logo ?? defaultLogoContent;
   const contentProps = {
@@ -9376,7 +9625,7 @@ function NSidebar({
     settingsLabel,
     onLogout,
     logoutLabel,
-    showCollapseButton,
+    showCollapseButton: showCollapseButton && collapseButtonPosition === "footer",
     collapsed,
     onToggleCollapsed: handleToggleCollapsed,
     collapseLabel,
@@ -9407,21 +9656,37 @@ function NSidebar({
         hamburgerClassName,
         showHamburgerButton,
         bordered,
+        borderDegree,
         children: mobileInner
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "aside",
       {
+        "data-border-degree": resolvedBorderDegree,
         className: cn(
           desktopClass,
-          "flex flex-col h-full bg-card transition-all duration-200",
-          bordered && "border border-muted-foreground shadow-none",
+          "relative z-10 flex flex-col h-full bg-card transition-all duration-200",
+          isNone ? "border-r border-transparent" : cn("border-r", sidebarShellBorderClass),
+          isStrong && "shadow-none",
           classNames?.sidebar,
           className
         ),
-        style: { width: collapsed ? collapsedWidth : expandedWidth },
-        children: sidebarInner
+        style: { width: collapsed ? collapsedWidth : expandedWidth, ["--rail"]: railVar },
+        children: [
+          sidebarInner,
+          showEdgeCollapse && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleToggleCollapsed,
+              "aria-label": collapsed ? expandLabel : collapseLabel,
+              title: collapsed ? expandLabel : collapseLabel,
+              className: "absolute right-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground",
+              children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
       }
     )
   ] });
@@ -9492,7 +9757,7 @@ function NNavbar({
               (userMenuActions.length > 0 || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
               userMenuActions.map((action) => {
                 const ActionIcon = action.icon;
-                return /* @__PURE__ */ jsxs(React38__default.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React__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" }),
@@ -9658,13 +9923,13 @@ function NPageHeaderTop({ children, className }) {
 }
 NPageHeaderTop.displayName = "NPageHeaderTop";
 function isPageHeaderSlot(child, slot) {
-  return React38__default.isValidElement(child) && child.type === slot;
+  return React__default.isValidElement(child) && child.type === slot;
 }
 function getSlotElements(children, slot) {
-  const matches = React38__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
+  const matches = React__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 }) {
+function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, search, children, className, headerClassName, bordered, borderDegree }) {
   const [internalSearch, setInternalSearch] = useState("");
   const searchValue = search?.value ?? internalSearch;
   const handleSearchChange = useCallback((e) => {
@@ -9677,13 +9942,21 @@ function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, sear
   const resolvedActions = slottedActions ?? actions;
   const resolvedFilters = slottedFilters ?? filters;
   const resolvedTop = slottedTop ?? top;
+  const resolvedBorderDegree = useResolvedBorderDegree({
+    borderDegree,
+    bordered,
+    fallback: "default"
+  });
+  const hasBorderShell = bordered || Boolean(borderDegree) || resolvedBorderDegree !== "default";
+  const isStrong = resolvedBorderDegree === "strong";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "page-header",
+      "data-border-degree": hasBorderShell ? resolvedBorderDegree : void 0,
       className: cn(
-        "border-b border-border",
-        bordered && "rounded-xl border border-muted-foreground bg-card shadow-none",
+        hasBorderShell ? cn("border rounded-xl bg-card shadow-none", borderColorClassForDegree(resolvedBorderDegree)) : "border-b border-border",
+        isStrong && "shadow-none",
         className
       ),
       children: [
@@ -9746,4 +10019,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, 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 };
+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, borderColorClassForDegree, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, dialogVariants, formatFileBytes, formatFileRelative, getIconColorProps, indicatorVariants, inputBorderColorClassForDegree, resolveBorderDegree, resolvePreset, resolveSlot, sliderVariants, surfaceBorderClasses, swapVariants, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, usePrefix, useResolvedBorderDegree, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };