najm-kit 0.0.7 → 0.0.8

package/dist/json.mjs

@@ -13,6 +13,7 @@ import { Slot } from '@radix-ui/react-slot';
 import * as LucideIcons from 'lucide-react';
 import { LoaderCircleIcon, Loader2, AlertCircle, ClipboardPaste, Copy, RotateCcw } from 'lucide-react';
 import { cva } from 'class-variance-authority';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
 // src/json/JsonViewer.tsx
 function cn(...inputs) {
@@ -197,7 +198,7 @@ var NIcon = ({
   };
   if (React3__default.isValidElement(icon)) {
     return React3__default.cloneElement(icon, {
-      className: cn(icon.props.className, className),
+      className: cn(className, icon.props.className),
       onClick,
       ...rest
     });
@@ -330,6 +331,7 @@ var Button = React3.forwardRef(
     loaderPosition = "left",
     leftIcon,
     rightIcon,
+    bordered = false,
     disabled,
     children,
     onClick,
@@ -371,7 +373,11 @@ var Button = React3.forwardRef(
         "aria-busy": isLoading || void 0,
         "aria-disabled": asChild && isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
-        className: cn(buttonVariants({ variant, size, rounded, fullWidth, className })),
+        className: cn(
+          buttonVariants({ variant, size, rounded, fullWidth }),
+          bordered && "border border-muted-foreground",
+          className
+        ),
         onClick: handleClick,
         ...props,
         children: showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -734,7 +740,7 @@ function JsonEditor({
             statusAddon && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: statusAddon })
           ] }),
           headerMiddle && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center gap-1.5 md:flex", children: headerMiddle }),
-          showActions && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 overflow-x-auto", children: [
+          showActions && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 najm-overlay-scroll-x", children: [
             onSmartPaste && /* @__PURE__ */ jsxs(Button, { variant: "secondary", disabled: saving || loading, onClick: onSmartPaste, title: "Paste & merge JSON from clipboard", className: "gap-1.5 whitespace-nowrap px-2 sm:px-3", children: [
               /* @__PURE__ */ jsx(ClipboardPaste, { className: "h-3.5 w-3.5 mr-1" }),
               /* @__PURE__ */ jsx("span", { children: smartPasteLabel ?? "Paste" })
@@ -820,6 +826,66 @@ var handler = {
   }
 };
 useTableStore.use = new Proxy({}, handler);
+function assignRef(ref, node) {
+  if (!ref) return;
+  if (typeof ref === "function") ref(node);
+  else ref.current = node;
+}
+function applyViewportLayout(node, axis) {
+  node.style.width = "100%";
+  node.style.height = "100%";
+  node.style.minWidth = "0";
+  node.style.minHeight = "0";
+  node.style.overflowX = axis === "x" || axis === "both" ? "auto" : "hidden";
+  node.style.overflowY = axis === "y" || axis === "both" ? "auto" : "hidden";
+}
+function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    OverlayScrollbarsComponent,
+    {
+      className: cn(className),
+      style: {
+        ...style,
+        display: "flex",
+        alignItems: "stretch",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        overflow: "hidden",
+        minHeight: 0,
+        minWidth: 0
+      },
+      element,
+      defer: true,
+      options: {
+        scrollbars: { theme: "os-theme-najm", autoHide, autoHideDelay: 500, clickScroll: true },
+        overflow: {
+          x: axis === "x" || axis === "both" ? "scroll" : "hidden",
+          y: axis === "y" || axis === "both" ? "scroll" : "hidden"
+        },
+        ...options
+      },
+      events: {
+        ...events,
+        initialized: (instance, ...rest) => {
+          const viewport = instance.elements().viewport;
+          applyViewportLayout(viewport, axis);
+          assignRef(viewportRef, viewport);
+          events?.initialized?.(instance, ...rest);
+        },
+        updated: (instance, ...rest) => {
+          applyViewportLayout(instance.elements().viewport, axis);
+          events?.updated?.(instance, ...rest);
+        },
+        destroyed: (instance, ...rest) => {
+          assignRef(viewportRef, null);
+          events?.destroyed?.(instance, ...rest);
+        }
+      },
+      ...props,
+      children
+    }
+  );
+}
 function formatJsonValue(value) {
   if (typeof value === "string") return value;
   try {
@@ -833,7 +899,7 @@ function NTableJson() {
   const renderJson = useTableStore.use.renderJson();
   const jsonValue = useTableStore.use.jsonValue();
   if (viewMode !== "json") return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx("pre", { className: "h-full min-h-0 overflow-auto rounded-md border border-border bg-muted/40 p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
 }
 
 export { JsonEditor, JsonViewer, NTableJson };