najm-kit 2.1.40 → 2.1.42

package/dist/index.d.ts

@@ -921,8 +921,8 @@ declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typ
 declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSubContent({ className, style, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, style, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, children, style, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, children, sideOffset, style, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
@@ -1221,7 +1221,7 @@ declare function Calendar(props: Record<string, any>): react_jsx_runtime.JSX.Ele
 declare function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
 declare function CommandDialog({ children, ...props }: React$1.ComponentProps<typeof Dialog>): react_jsx_runtime.JSX.Element;
 declare function CommandInput({ className, ...props }: React$1.ComponentProps<typeof Command$1.Input>): react_jsx_runtime.JSX.Element;
-declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
+declare function CommandList({ className, children, ...props }: React$1.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
 declare function CommandEmpty({ ...props }: React$1.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime.JSX.Element;
 declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof Command$1.Group>): react_jsx_runtime.JSX.Element;
 declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime.JSX.Element;

package/dist/index.mjs

@@ -14,10 +14,11 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { OverlayScrollbars } from 'overlayscrollbars';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { create } from 'zustand';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -1979,6 +1980,89 @@ function ResetButton({
     }
   );
 }
+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 najmScrollOptions(axis, autoHide, options) {
+  return {
+    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
+  };
+}
+function useNajmScrollViewport({
+  axis = "y",
+  autoHide = "never",
+  options
+} = {}) {
+  const hostRef = React.useRef(null);
+  const viewportRef = React.useRef(null);
+  React.useEffect(() => {
+    const target = hostRef.current;
+    const viewport = viewportRef.current;
+    if (!target || !viewport) return;
+    const instance = OverlayScrollbars(
+      { target, elements: { viewport } },
+      najmScrollOptions(axis, autoHide, options)
+    );
+    const containWheel = (event) => event.stopPropagation();
+    viewport.addEventListener("wheel", containWheel, { passive: true });
+    return () => {
+      viewport.removeEventListener("wheel", containWheel);
+      instance.destroy();
+    };
+  }, [axis, autoHide, options]);
+  return { hostRef, viewportRef };
+}
+function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    OverlayScrollbarsComponent,
+    {
+      className: cn(className),
+      style: {
+        ...style,
+        overflow: "hidden",
+        minHeight: 0,
+        minWidth: 0
+      },
+      element,
+      defer: true,
+      options: najmScrollOptions(axis, autoHide, options || void 0),
+      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 Select({ ...props }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -2025,10 +2109,12 @@ function SelectContent({ className, children, position = "popper", style, ...pro
       borderColor: "var(--border)"
     } : {}
   };
+  const { hostRef, viewportRef } = useNajmScrollViewport();
   useNajmPortalLayerStyles();
-  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     SelectPrimitive.Content,
     {
+      ref: hostRef,
       "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-[10000] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden rounded-md shadow-md",
@@ -2039,11 +2125,17 @@ function SelectContent({ className, children, position = "popper", style, ...pro
       style: { ...recipeStyle, ...style },
       position,
       ...props,
-      children: [
-        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children }),
-        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-      ]
+      children: /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          ref: viewportRef,
+          className: cn(
+            "max-h-[var(--radix-select-content-available-height)] overflow-x-hidden",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "p-1", children })
+        }
+      )
     }
   ) });
 }
@@ -4452,62 +4544,6 @@ function SheetTitle({ className, ...props }) {
 function SheetDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className), ...props });
 }
-function assignRef(ref, node) {
-  if (!ref) return;
-  if (typeof ref === "function") ref(node);
-  else ref.current = node;
-}
-function applyViewportLayout(node, axis) {
-  node.style.width = "100%";
-  node.style.height = "100%";
-  node.style.minWidth = "0";
-  node.style.minHeight = "0";
-  node.style.overflowX = axis === "x" || axis === "both" ? "auto" : "hidden";
-  node.style.overflowY = axis === "y" || axis === "both" ? "auto" : "hidden";
-}
-function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
-  return /* @__PURE__ */ jsx(
-    OverlayScrollbarsComponent,
-    {
-      className: cn(className),
-      style: {
-        ...style,
-        overflow: "hidden",
-        minHeight: 0,
-        minWidth: 0
-      },
-      element,
-      defer: true,
-      options: {
-        scrollbars: { theme: "os-theme-najm", autoHide, autoHideDelay: 500, clickScroll: true },
-        overflow: {
-          x: axis === "x" || axis === "both" ? "scroll" : "hidden",
-          y: axis === "y" || axis === "both" ? "scroll" : "hidden"
-        },
-        ...options
-      },
-      events: {
-        ...events,
-        initialized: (instance, ...rest) => {
-          const viewport = instance.elements().viewport;
-          applyViewportLayout(viewport, axis);
-          assignRef(viewportRef, viewport);
-          events?.initialized?.(instance, ...rest);
-        },
-        updated: (instance, ...rest) => {
-          applyViewportLayout(instance.elements().viewport, axis);
-          events?.updated?.(instance, ...rest);
-        },
-        destroyed: (instance, ...rest) => {
-          assignRef(viewportRef, null);
-          events?.destroyed?.(instance, ...rest);
-        }
-      },
-      ...props,
-      children
-    }
-  );
-}
 var PortalScopeContext = createContext(void 0);
 function NPortalScopeProvider({ className, children }) {
   return /* @__PURE__ */ jsx(PortalScopeContext.Provider, { value: className, children });
@@ -5941,39 +5977,45 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
     }
   );
 }
-function DropdownMenuSubContent({ className, style, ...props }) {
+function DropdownMenuSubContent({ className, children, style, ...props }) {
   const surface = useDropdownSurfaceRecipe("subContent");
+  const { hostRef, viewportRef } = useNajmScrollViewport();
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.SubContent,
     {
+      ref: hostRef,
       "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=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",
+        "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] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-hidden rounded-md border shadow-lg",
         surface.className,
         className
       ),
       style: { ...surface.style, ...style },
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref: viewportRef, className: "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-x-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-1", children }) })
     }
   );
 }
-function DropdownMenuContent({ className, sideOffset = 4, style, ...props }) {
+function DropdownMenuContent({ className, children, sideOffset = 4, style, ...props }) {
   const container = React.useContext(NajmThemeContainerCtx);
   const surface = useDropdownSurfaceRecipe("content");
+  const { hostRef, viewportRef } = useNajmScrollViewport();
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
     {
+      ref: hostRef,
       "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-[10000] min-w-[8rem] overflow-hidden rounded-md border border-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] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-hidden rounded-md border border-border shadow-md",
         surface.className,
         className
       ),
       style: { ...surface.style, ...style },
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref: viewportRef, className: "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-x-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-1", children }) })
     }
   ) });
 }
@@ -6630,8 +6672,18 @@ function CommandInput({ className, ...props }) {
     )
   ] });
 }
-function CommandList({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Command$1.List, { "data-slot": "command-list", className: cn("max-h-[300px] najm-overlay-scroll-y overflow-x-hidden", className), ...props });
+function CommandList({ className, children, ...props }) {
+  const { hostRef, viewportRef } = useNajmScrollViewport();
+  return /* @__PURE__ */ jsx(
+    Command$1.List,
+    {
+      ref: hostRef,
+      "data-slot": "command-list",
+      className: cn("max-h-[300px] overflow-hidden", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref: viewportRef, "data-slot": "command-list-viewport", className: "max-h-[300px] overflow-x-hidden", children })
+    }
+  );
 }
 function CommandEmpty({ ...props }) {
   return /* @__PURE__ */ jsx(Command$1.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props });
@@ -8735,7 +8787,7 @@ function FloatingSelectSegment({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { side: "top", align: "center", className: "max-h-72 najm-overlay-scroll-y", children: action.options.map((o) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(DropdownMenuContent, { side: "top", align: "center", className: "max-h-72", children: action.options.map((o) => /* @__PURE__ */ jsx(
       DropdownMenuItem,
       {
         onSelect: () => void onAction(action.id, o.value),
@@ -9181,16 +9233,18 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
         },
         children: /* @__PURE__ */ jsxs(Command, { children: [
           showSearch && /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, className: "h-9" }),
-          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-          /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] najm-overlay-scroll-y", children: items.map((item) => {
-            const itemValue = typeof item === "string" ? item : item.value;
-            const itemLabel = typeof item === "string" ? item : item.label;
-            const isSelected = value.includes(itemValue);
-            return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(itemValue), className: "flex items-center gap-2 cursor-pointer", children: [
-              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleSelect(itemValue), className: "pointer-events-none" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1", children: itemLabel })
-            ] }, itemValue);
-          }) })
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: items.map((item) => {
+              const itemValue = typeof item === "string" ? item : item.value;
+              const itemLabel = typeof item === "string" ? item : item.label;
+              const isSelected = value.includes(itemValue);
+              return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(itemValue), className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleSelect(itemValue), className: "pointer-events-none" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: itemLabel })
+              ] }, itemValue);
+            }) })
+          ] })
         ] })
       }
     )
@@ -10428,7 +10482,7 @@ function Combobox({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-64 najm-overlay-scroll-y py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: allowFreeText && query.trim() ? `Press Enter to use "${query.trim()}"` : emptyText }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(NajmScroll, { className: "max-h-64", onWheel: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx("div", { className: "py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: allowFreeText && query.trim() ? `Press Enter to use "${query.trim()}"` : emptyText }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -10445,7 +10499,7 @@ function Combobox({
           ]
         },
         opt.value
-      )) })
+      )) }) })
     ] })
   ] });
 }

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 'overlayscrollbars';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
 // src/json/JsonViewer.tsx
@@ -977,6 +978,16 @@ function applyViewportLayout(node, axis) {
   node.style.overflowX = axis === "x" || axis === "both" ? "auto" : "hidden";
   node.style.overflowY = axis === "y" || axis === "both" ? "auto" : "hidden";
 }
+function najmScrollOptions(axis, autoHide, options) {
+  return {
+    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
+  };
+}
 function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
   return /* @__PURE__ */ jsx(
     OverlayScrollbarsComponent,
@@ -990,14 +1001,7 @@ function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, ev
       },
       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
-      },
+      options: najmScrollOptions(axis, autoHide, options || void 0),
       events: {
         ...events,
         initialized: (instance, ...rest) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.1.40",
+  "version": "2.1.42",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",