najm-kit 0.0.7 → 0.0.9

package/dist/json.mjs

@@ -1,5 +1,5 @@
-import * as React3 from 'react';
-import React3__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
+import * as React2 from 'react';
+import React2__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { json } from '@codemirror/lang-json';
 import { keymap, EditorView, Decoration, ViewPlugin } from '@codemirror/view';
@@ -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) {
@@ -172,6 +173,44 @@ function JsonViewer({ value, colors = defaultJsonViewColors, className, maxHeigh
     }
   );
 }
+React2.createContext(0);
+React2.createContext(null);
+var DEFAULT_APPEARANCE = {
+  borderDegree: "default"
+};
+var NajmAppearanceContext = React2.createContext(DEFAULT_APPEARANCE);
+function useNajmAppearance() {
+  return React2.useContext(NajmAppearanceContext);
+}
+
+// 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 useResolvedBorderDegree(options = {}) {
+  const appearance = useNajmAppearance();
+  return resolveBorderDegree(
+    options.borderDegree,
+    options.bordered,
+    appearance.borderDegree,
+    options.fallback
+  );
+}
 function toPascalCase(value) {
   return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
 }
@@ -195,9 +234,9 @@ var NIcon = ({
     height: size,
     ...style
   };
-  if (React3__default.isValidElement(icon)) {
-    return React3__default.cloneElement(icon, {
-      className: cn(icon.props.className, className),
+  if (React2__default.isValidElement(icon)) {
+    return React2__default.cloneElement(icon, {
+      className: cn(className, icon.props.className),
       onClick,
       ...rest
     });
@@ -314,7 +353,7 @@ function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
-var Button = React3.forwardRef(
+var Button = React2.forwardRef(
   ({
     className,
     variant,
@@ -330,16 +369,23 @@ var Button = React3.forwardRef(
     loaderPosition = "left",
     leftIcon,
     rightIcon,
+    bordered,
+    borderDegree,
     disabled,
     children,
     onClick,
     ...props
   }, ref) => {
-    const [pending, setPending] = React3.useState(false);
+    const [pending, setPending] = React2.useState(false);
     const isLoading = loading || pending;
     const isDisabled = disabled || disabledWhileLoading && isLoading;
     const Comp = asChild ? Slot : "button";
-    const handleClick = React3.useCallback(
+    const resolvedBorderDegree = useResolvedBorderDegree({
+      borderDegree,
+      bordered,
+      fallback: "default"
+    });
+    const handleClick = React2.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -368,10 +414,24 @@ var Button = React3.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, className })),
+        className: cn(
+          buttonVariants({ variant, size, rounded, fullWidth }),
+          // 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,
         ...props,
         children: showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -734,7 +794,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 +880,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 +953,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 };