najm-kit 2.10.0 → 2.11.0

package/dist/index.mjs

@@ -1,11 +1,13 @@
 import { resolveAvatarSrc } from './chunk-BEGOH366.mjs';
 export { isPlaceholderAvatar, resolveAvatarSrc } from './chunk-BEGOH366.mjs';
-import { useResolvedFormDevTools, useNBranding } from './chunk-HML2JZXT.mjs';
-export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-HML2JZXT.mjs';
-import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels } from './chunk-FDONJASN.mjs';
-export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-FDONJASN.mjs';
-import { inputBorderClasses, Button, NIcon, NajmScroll, surfaceBorderClasses, useNajmScrollViewport, buttonVariants, NButton, useTableStore, TableStoreContext, sidebarBorderClasses, NTableJson } from './chunk-JUYT2ISO.mjs';
-export { Button, NButton, NIcon, NTableJson, NajmScroll, TableStoreContext, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses, useTableStore } from './chunk-JUYT2ISO.mjs';
+import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-2GFWF46W.mjs';
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-2GFWF46W.mjs';
+import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels } from './chunk-EEBLEDNI.mjs';
+export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-EEBLEDNI.mjs';
+import { NajmScroll, useNajmScrollViewport, useTableStore, TableStoreContext, NTableJson } from './chunk-K7T7X6PX.mjs';
+export { NTableJson, NajmScroll, TableStoreContext, useTableStore } from './chunk-K7T7X6PX.mjs';
+import { inputBorderClasses, Button, NIcon, surfaceBorderClasses, buttonVariants, NButton, sidebarBorderClasses } from './chunk-XZL32HFR.mjs';
+export { Button, NButton, NIcon, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses } from './chunk-XZL32HFR.mjs';
 import { useNajmComponentStyle, cn, NajmThemeContainerCtx, useNajmThemeMode, useNajmDesign, composePreset } from './chunk-KVZACF4G.mjs';
 export { NajmDesignProvider, NajmThemeProvider, cn, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode } from './chunk-KVZACF4G.mjs';
 export { DEFAULT_CARD_BREAKPOINT, DEFAULT_CARD_PAGINATION_KEY_PREFIX, buildCardPaginationLabels, createCardPagination, useCardViewport, useDesktopTableMode, useMediaQuery } from './chunk-OUS7OYVA.mjs';
@@ -19,7 +21,7 @@ import * as React61 from 'react';
 import React61__default, { createContext, useRef, useMemo, useState, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, Eye, EyeOff, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Copy, Scissors, LoaderCircleIcon, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, Eye, EyeOff, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, Copy, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Scissors, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { HexColorPicker } from 'react-colorful';
@@ -51,6 +53,9 @@ import { FormProvider, Controller, useFormContext, useForm, useFieldArray } from
 import { zodResolver } from '@hookform/resolvers/zod';
 import { getExpandedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, useReactTable, flexRender } from '@tanstack/react-table';
 
+// src/theme/focus.ts
+var focusRingClasses = "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50";
+var focusRingWithinClasses = "focus-visible:ring-[3px] focus-visible:ring-ring/50 has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50";
 function Tabs({
   className,
   variant = "pills",
@@ -134,7 +139,8 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex cursor-pointer items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex cursor-pointer items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        focusRingClasses,
         triggerVariantMap[variant],
         className
       ),
@@ -143,7 +149,14 @@ function TabsTrigger({
   );
 }
 function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1", focusRingClasses, className),
+      ...props
+    }
+  );
 }
 
 // src/components/tabs/tabColors.ts
@@ -472,6 +485,13 @@ var BaseInput = React61__default.forwardRef(
         style: recipeRadius ? { borderRadius: recipeRadius, ...style } : style,
         className: cn(
           inputVariants({ variant, status, hasIcon, disabled }),
+          // The wrapper is what the user reads as "the field": the inner
+          // control is stripped of its own ring precisely so this element can
+          // carry the border. Until this was added, the border merely changed
+          // colour on focus — a 1px hue shift and nothing else — and the number
+          // fields and the multi-select trigger came out of the acceptance walk
+          // as tab stops with no visible indicator at all.
+          !isGhost && focusRingWithinClasses,
           !isGhost && borderClass,
           !isGhost && colorClass,
           className
@@ -835,8 +855,18 @@ function SegmentedControl({
 function Collapsible({ ...props }) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
-function CollapsibleTrigger2({ ...props }) {
-  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+function CollapsibleTrigger2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      className: cn(focusRingClasses, className),
+      ...props
+    }
+  );
 }
 function CollapsibleContent2({ ...props }) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
@@ -1126,9 +1156,18 @@ function useResponsivePadding(value) {
   }, [value]);
   return resolved;
 }
-function DialogContent({ className, children, padding, hideClose = false, ...props }) {
+function DialogContent({
+  className,
+  children,
+  padding,
+  hideClose = false,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  ...props
+}) {
   const resolvedPadding = useResponsivePadding(padding);
   const portalClassName = useNPortalScope();
+  const openerRef = React61.useRef(null);
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -1136,6 +1175,22 @@ function DialogContent({ className, children, padding, hideClose = false, ...pro
       {
         "data-slot": "dialog-content",
         "data-padding": resolvedPadding,
+        onOpenAutoFocus: (event) => {
+          const active = document.activeElement;
+          openerRef.current = active instanceof HTMLElement && active !== document.body ? active : null;
+          onOpenAutoFocus?.(event);
+        },
+        onCloseAutoFocus: (event) => {
+          onCloseAutoFocus?.(event);
+          if (event.defaultPrevented) return;
+          const opener = openerRef.current;
+          setTimeout(() => {
+            if (!opener?.isConnected) return;
+            const active = document.activeElement;
+            const lost = !active || active === document.body || active === document.documentElement || !active.isConnected;
+            if (lost) opener.focus();
+          }, 0);
+        },
         className: cn(
           "bg-card text-card-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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-none lg:rounded-lg najm-border border-border shadow-lg duration-200",
           dialogPaddingMap[resolvedPadding],
@@ -3676,7 +3731,8 @@ function CollapsibleSection({
             className: cn(
               "flex w-full items-center justify-between gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wide",
               "text-muted-foreground hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-md",
+              focusRingClasses,
+              "focus-visible:rounded-md",
               "disabled:pointer-events-none disabled:opacity-50"
             ),
             children: [
@@ -3994,7 +4050,8 @@ function TokenGroupSection({
             className: cn(
               "flex w-full items-center justify-between gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wide",
               "text-muted-foreground hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-md",
+              focusRingClasses,
+              "focus-visible:rounded-md",
               "disabled:pointer-events-none disabled:opacity-50"
             ),
             "aria-label": labelText,
@@ -8088,115 +8145,6 @@ function TableCell({ className, ...props }) {
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
 }
-var Default = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderIcon, { className: cn("animate-spin", className), ...props });
-var Circle = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("animate-spin", className), ...props });
-var Pinwheel = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderPinwheelIcon, { className: cn("animate-spin", className), ...props });
-var CircleFilled = ({ className, size = 24, ...props }) => /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
-  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rotate-180", children: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("animate-spin", className, "text-foreground opacity-20"), size, ...props }) }),
-  /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("relative animate-spin", className), size, ...props })
-] });
-var Ellipsis = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-  /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "0;ellipsis3.end+0.25s", calcMode: "spline", dur: "0.6s", id: "ellipsis1", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) }),
-  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "ellipsis1.begin+0.1s", calcMode: "spline", dur: "0.6s", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) }),
-  /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "ellipsis1.begin+0.2s", calcMode: "spline", dur: "0.6s", id: "ellipsis3", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) })
-] });
-var Ring = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, stroke: "currentColor", viewBox: "0 0 44 44", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-  /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "1", children: [
-      /* @__PURE__ */ jsx("animate", { attributeName: "r", begin: "0s", calcMode: "spline", dur: "1.8s", keySplines: "0.165, 0.84, 0.44, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 20" }),
-      /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", begin: "0s", calcMode: "spline", dur: "1.8s", keySplines: "0.3, 0.61, 0.355, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 0" })
-    ] }),
-    /* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "1", children: [
-      /* @__PURE__ */ jsx("animate", { attributeName: "r", begin: "-0.9s", calcMode: "spline", dur: "1.8s", keySplines: "0.165, 0.84, 0.44, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 20" }),
-      /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", begin: "-0.9s", calcMode: "spline", dur: "1.8s", keySplines: "0.3, 0.61, 0.355, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 0" })
-    ] })
-  ] })
-] });
-var Bars = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "1", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) }),
-  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "10", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0.1s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) }),
-  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "19", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0.2s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) })
-] });
-var Infinite = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    height: size,
-    preserveAspectRatio: "xMidYMid",
-    viewBox: "0 0 100 100",
-    width: size,
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z",
-          fill: "none",
-          stroke: "currentColor",
-          strokeDasharray: "205.271142578125 51.317785644531256",
-          strokeLinecap: "round",
-          strokeWidth: "10",
-          style: { transform: "scale(0.8)", transformOrigin: "50px 50px" },
-          children: /* @__PURE__ */ jsx(
-            "animate",
-            {
-              attributeName: "stroke-dashoffset",
-              dur: "2s",
-              keyTimes: "0;1",
-              repeatCount: "indefinite",
-              values: "0;256.58892822265625"
-            }
-          )
-        }
-      )
-    ]
-  }
-);
-var spinnerVariants = {
-  default: Default,
-  circle: Circle,
-  pinwheel: Pinwheel,
-  "circle-filled": CircleFilled,
-  ellipsis: Ellipsis,
-  ring: Ring,
-  bars: Bars,
-  infinite: Infinite
-};
-function NSpinner({ variant = "default", size = 24, className, ...props }) {
-  const Component = spinnerVariants[variant] || Default;
-  return /* @__PURE__ */ jsx(Component, { className, size, ...props });
-}
-function NLoadingState({ label = "Loading...", className, fullScreen = false, spinnerVariant = "circle", spinnerSize = 32 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-8", fullScreen && "fixed inset-0 z-50 bg-background/80", className), children: [
-    /* @__PURE__ */ jsx(NSpinner, { variant: spinnerVariant, size: spinnerSize }),
-    label && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: label })
-  ] });
-}
-function NErrorState({ title = "Something went wrong", message, onRetry, retryLabel = "Try again", className, icon }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 py-8", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "text-destructive", children: icon || /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: title }),
-      message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mt-1", children: message })
-    ] }),
-    onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onRetry, children: retryLabel })
-  ] });
-}
-function NEmptyState({ title = "No data", description, icon, action, className }) {
-  const iconContent = icon ? React61__default.isValidElement(icon) ? icon : React61__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: [
-      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mt-1", children: description })
-    ] }),
-    action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
-  ] });
-}
 var NErrorBoundary = class extends React61__default.Component {
   constructor(props) {
     super(props);
@@ -10375,6 +10323,224 @@ function FloatingSelectSegment({
     )) })
   ] });
 }
+var DEFAULT_COPY_LABEL = "Copy details";
+var DEFAULT_COPIED_LABEL = "Copied";
+var DEFAULT_COPY_ERROR_LABEL = "Copy failed";
+var DEFAULT_HEADER_ICON = "circle-check";
+var REVERT_MS = 2e3;
+function defaultCopyText(fields) {
+  return fields.map((f) => `${f.label}: ${f.value}`).join("\n");
+}
+function resolveClipboard() {
+  if (typeof navigator === "undefined") return null;
+  const clipboard = navigator.clipboard;
+  if (!clipboard || typeof clipboard.writeText !== "function") return null;
+  return { writeText: clipboard.writeText.bind(clipboard) };
+}
+function NCredentialsCard({
+  fields,
+  title,
+  description,
+  icon,
+  copyLabel = DEFAULT_COPY_LABEL,
+  copiedLabel = DEFAULT_COPIED_LABEL,
+  copyErrorLabel = DEFAULT_COPY_ERROR_LABEL,
+  copyText,
+  hideCopyAction = false,
+  onCopy,
+  onCopyError,
+  actions,
+  className,
+  classNames
+}) {
+  const [status, setStatus] = React61.useState("idle");
+  const revertTimer = React61.useRef(null);
+  const mountedRef = React61.useRef(true);
+  const requestTokenRef = React61.useRef(0);
+  React61.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (revertTimer.current) clearTimeout(revertTimer.current);
+      revertTimer.current = null;
+    };
+  }, []);
+  const scheduleRevert = React61.useCallback(() => {
+    if (revertTimer.current) clearTimeout(revertTimer.current);
+    revertTimer.current = setTimeout(() => {
+      revertTimer.current = null;
+      if (mountedRef.current) setStatus("idle");
+    }, REVERT_MS);
+  }, []);
+  const handleCopy = React61.useCallback(() => {
+    if (status === "pending") return;
+    if (revertTimer.current) {
+      clearTimeout(revertTimer.current);
+      revertTimer.current = null;
+    }
+    const token = ++requestTokenRef.current;
+    const isStale = () => !mountedRef.current || token !== requestTokenRef.current;
+    let text;
+    try {
+      text = (copyText ?? defaultCopyText)(fields);
+    } catch (error) {
+      if (isStale()) return;
+      setStatus("error");
+      onCopyError?.(error);
+      scheduleRevert();
+      return;
+    }
+    const clipboard = resolveClipboard();
+    if (!clipboard) {
+      if (isStale()) return;
+      setStatus("error");
+      onCopyError?.(new Error("Clipboard is not available in this context."));
+      scheduleRevert();
+      return;
+    }
+    setStatus("pending");
+    let promise;
+    try {
+      promise = clipboard.writeText(text);
+    } catch (error) {
+      if (isStale()) return;
+      setStatus("error");
+      onCopyError?.(error);
+      scheduleRevert();
+      return;
+    }
+    promise.then(
+      () => {
+        if (isStale()) return;
+        setStatus("success");
+        onCopy?.();
+        scheduleRevert();
+      },
+      (error) => {
+        if (isStale()) return;
+        setStatus("error");
+        onCopyError?.(error);
+        scheduleRevert();
+      }
+    );
+  }, [copyText, fields, onCopy, onCopyError, scheduleRevert, status]);
+  const showHeader = Boolean(title || description);
+  const showFields = fields.length > 0;
+  const showActions = !hideCopyAction || Boolean(actions);
+  const buttonLabel = status === "success" ? copiedLabel : status === "error" ? copyErrorLabel : copyLabel;
+  const headerIcon = icon ?? DEFAULT_HEADER_ICON;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-lg border bg-card p-5 shadow-sm",
+        classNames?.root,
+        className
+      ),
+      "data-testid": "credentials-card",
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3 mb-4", classNames?.header), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex items-center justify-center w-10 h-10 rounded-full bg-muted shrink-0",
+              "data-testid": "credentials-card-header-icon",
+              children: /* @__PURE__ */ jsx(
+                NIcon,
+                {
+                  "aria-hidden": "true",
+                  icon: headerIcon,
+                  className: "w-5 h-5 text-muted-foreground"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] })
+        ] }),
+        showFields && /* @__PURE__ */ jsx("dl", { className: cn("space-y-3", classNames?.list), "data-testid": "credentials-card-list", children: fields.map((field, index) => {
+          const useMono = field.mono ?? true;
+          const breakAll = field.breakAll ?? true;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-3 rounded-xl bg-background px-4 py-3",
+                classNames?.field
+              ),
+              "data-testid": "credentials-card-field",
+              children: [
+                field.icon && /* @__PURE__ */ jsx(
+                  NIcon,
+                  {
+                    "aria-hidden": "true",
+                    icon: field.icon,
+                    className: "w-4 h-4 text-muted-foreground shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: field.label }),
+                  /* @__PURE__ */ jsx(
+                    "dd",
+                    {
+                      dir: "auto",
+                      className: cn(
+                        "text-sm text-foreground font-semibold",
+                        useMono && "font-mono",
+                        breakAll && "break-all"
+                      ),
+                      children: field.value
+                    }
+                  )
+                ] })
+              ]
+            },
+            `${field.label}-${index}`
+          );
+        }) }),
+        showActions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-5 flex justify-end gap-3 flex-wrap",
+              classNames?.actions
+            ),
+            "data-testid": "credentials-card-actions",
+            children: [
+              !hideCopyAction && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  leftIcon: status === "success" ? Check : status === "error" ? X : Copy,
+                  onClick: handleCopy,
+                  loading: status === "pending",
+                  disabledWhileLoading: true,
+                  "data-testid": "credentials-card-copy",
+                  children: buttonLabel
+                }
+              ),
+              actions
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-live": "polite",
+            role: "status",
+            className: "sr-only",
+            "data-testid": "credentials-card-status",
+            children: status === "success" ? copiedLabel : status === "error" ? copyErrorLabel : ""
+          }
+        )
+      ]
+    }
+  );
+}
+NCredentialsCard.displayName = "NCredentialsCard";
 function SearchField({ value, onChange, placeholder = "Search...", className }) {
   return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
     /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }),
@@ -15138,37 +15304,6 @@ function NCommandPalette({
     ] })
   ] });
 }
-function NPageLayout({
-  as: Comp = "main",
-  className,
-  style,
-  ...props
-}) {
-  const { layout } = useNajmDesign();
-  const pageGutter = layout?.pageGutter ?? "var(--page-gutter, 24px)";
-  const sectionGap = layout?.sectionGap ?? "var(--section-gap, 20px)";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: cn("flex min-w-0 flex-col", className),
-      style: {
-        /**
-         * Published so descendants can cancel the page padding exactly. A
-         * full-bleed child (a non-card NPageHeader) cannot guess these: the
-         * design config resolves them to literals, not to the `--page-gutter`
-         * / `--section-gap` fallbacks.
-         */
-        "--najm-page-gutter": pageGutter,
-        "--najm-section-gap": sectionGap,
-        gap: sectionGap,
-        paddingInline: pageGutter,
-        paddingBlock: sectionGap,
-        ...style
-      },
-      ...props
-    }
-  );
-}
 function NInspectorSheet({ open, onClose, title, children }) {
   useEffect(() => {
     const handleKey = (e) => {
@@ -15255,4 +15390,4 @@ function NGridItem({
   return /* @__PURE__ */ jsx("div", { className: itemClassName, ...props, children });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput, 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, DEFAULT_THEME_FILE_NAME, 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, Indicator4 as Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_SAVED_THEME_VALUE, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBulkActionsBar, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NChartSkeleton, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NImage, NIndicator, NInspectorSheet, NLineChart, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPieChart, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarBrand, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarMobile, NSidebarProvider, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NThemePresets, NUploader, NViewBody, NViewToggle, NativeSelect, NumberInput, OtpInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, 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, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, createDialogStore, createTableStore, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, normalizeThemeFileName, parseColor, parseThemeFile, resolveHiddenBelowClass, resolveSlot, sliderVariants, stringifyThemeFile, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNSidebar, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useVariant, useVariantPreset };
+export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput, 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, DEFAULT_THEME_FILE_NAME, 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, Indicator4 as Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_SAVED_THEME_VALUE, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBulkActionsBar, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NChartSkeleton, NCommandPalette, NConfirmDialog, NContextMenu, NCredentialsCard, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NErrorBoundary, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NImage, NIndicator, NInspectorSheet, NLineChart, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPieChart, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarBrand, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarMobile, NSidebarProvider, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NStatCard, NStatCardSkeleton, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NThemePresets, NUploader, NViewBody, NViewToggle, NativeSelect, NumberInput, OtpInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, 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, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, createDialogStore, createTableStore, detectFormat, dialogVariants, filterResponsiveColumns, focusRingClasses, focusRingWithinClasses, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, normalizeThemeFileName, parseColor, parseThemeFile, resolveHiddenBelowClass, resolveSlot, sliderVariants, stringifyThemeFile, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNSidebar, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useVariant, useVariantPreset };

package/dist/json.mjs

@@ -1,5 +1,5 @@
-import { Button } from './chunk-JUYT2ISO.mjs';
-export { NTableJson } from './chunk-JUYT2ISO.mjs';
+export { NTableJson } from './chunk-K7T7X6PX.mjs';
+import { Button } from './chunk-XZL32HFR.mjs';
 import { cn } from './chunk-KVZACF4G.mjs';
 import './chunk-TFHWLE7N.mjs';
 import { useMemo, useRef, useCallback } from 'react';

package/dist/theme.css

@@ -307,10 +307,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +367,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
@@ -84,6 +84,8 @@
     "test": "bun test && bun run test:rsc",
     "test:rsc": "cd test/rsc && bun test --conditions react-server",
     "test:next16": "bun run build && bun integration/next16-ui-bootstrap/run.ts",
+    "test:acceptance": "playwright test",
+    "typecheck:acceptance": "tsc --noEmit -p acceptance/tsconfig.json",
     "clean": "rimraf dist tsconfig.tsbuildinfo"
   },
   "peerDependencies": {