najm-kit 2.6.3 → 2.7.0

package/dist/json.mjs

@@ -1,25 +1,16 @@
-import * as React5 from 'react';
-import React5__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
+import { cn, Button } from './chunk-4DLRXB2W.mjs';
+export { NTableJson } from './chunk-4DLRXB2W.mjs';
+import './chunk-YBM5CTE6.mjs';
+import { 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';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { EditorSelection, EditorState, RangeSetBuilder } from '@codemirror/state';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-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';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Loader2, AlertCircle, ClipboardPaste, Copy, RotateCcw } from 'lucide-react';
 
-// src/json/JsonViewer.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var defaultJsonViewColors = {
   toolName: "#10b981",
   langCode: "#f59e0b",
@@ -174,368 +165,6 @@ function JsonViewer({ value, colors = defaultJsonViewColors, className, maxHeigh
     }
   );
 }
-
-// src/theme/borders.ts
-function inputBorderClasses(bordered = true) {
-  return bordered === false ? "border-0" : "najm-border border-input";
-}
-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("");
-}
-function isImageSource(value) {
-  return value.startsWith("/") || value.startsWith("./") || value.startsWith("../") || value.startsWith("http://") || value.startsWith("https://") || value.startsWith("data:image/") || /\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i.test(value);
-}
-function isComponentSource(value) {
-  return typeof value === "function" || Boolean(value && typeof value === "object" && "$$typeof" in value);
-}
-var NIcon = ({
-  icon = "circle",
-  size = 24,
-  alt = "",
-  className,
-  style,
-  onClick,
-  ...rest
-}) => {
-  const dimensionStyle = {
-    width: size,
-    height: size,
-    ...style
-  };
-  if (React5__default.isValidElement(icon)) {
-    return React5__default.cloneElement(icon, {
-      className: cn(className, icon.props.className),
-      onClick,
-      ...rest
-    });
-  }
-  if (icon && typeof icon === "object" && "src" in icon) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt: icon.alt ?? alt,
-        className: cn("inline-block shrink-0 object-contain", className),
-        src: icon.src,
-        style: dimensionStyle,
-        onClick,
-        ...rest
-      }
-    );
-  }
-  if (isComponentSource(icon)) {
-    const IconComponent = icon;
-    return /* @__PURE__ */ jsx(IconComponent, { size, className, onClick, style, ...rest });
-  }
-  if (typeof icon === "string") {
-    if (isImageSource(icon)) {
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          alt,
-          className: cn("inline-block shrink-0 object-contain", className),
-          src: icon,
-          style: dimensionStyle,
-          onClick,
-          ...rest
-        }
-      );
-    }
-    const pascalCaseIcon = toPascalCase(icon);
-    if (LucideIcons[pascalCaseIcon]) {
-      const LucideIcon = LucideIcons[pascalCaseIcon];
-      return /* @__PURE__ */ jsx(LucideIcon, { size, className, onClick, style, ...rest });
-    }
-    return null;
-  }
-  return null;
-};
-NIcon.displayName = "NIcon";
-React5.createContext(0);
-React5.createContext(void 0);
-React5.createContext(null);
-var DEFAULT_APPEARANCE = {};
-React5.createContext(DEFAULT_APPEARANCE);
-var NajmDesignContext = React5.createContext({
-  components: {}
-});
-function useNajmDesign() {
-  return React5.useContext(NajmDesignContext);
-}
-function useNajmComponentStyle(name) {
-  const { components } = useNajmDesign();
-  return components[name];
-}
-
-// src/theme/design-types.ts
-var NAJM_COMPONENT_NAMES = [
-  "button",
-  "badge",
-  "card",
-  "table",
-  "tabs",
-  "dialog",
-  "alert",
-  "sidebar",
-  "pageHeader",
-  "input",
-  "select",
-  "dropdown",
-  "sheet",
-  "popover",
-  "tooltip",
-  "progress",
-  "avatar"
-];
-var RADIUS_VALUE_MAP = {
-  none: "0",
-  xs: "var(--radius-xs)",
-  sm: "var(--radius-sm)",
-  md: "var(--radius-md)",
-  lg: "var(--radius-lg)",
-  xl: "var(--radius-xl)",
-  full: "9999px"
-};
-function resolveRadiusValue(radius) {
-  if (!radius || radius === "inherit") return void 0;
-  return RADIUS_VALUE_MAP[radius] ?? radius;
-}
-
-// src/theme/config.ts
-var MODES = ["light", "dark"];
-var TOKEN_KEYS = [
-  "background",
-  "foreground",
-  "card",
-  "card-foreground",
-  "popover",
-  "popover-foreground",
-  "primary",
-  "primary-foreground",
-  "secondary",
-  "secondary-foreground",
-  "tertiary",
-  "tertiary-foreground",
-  "muted",
-  "muted-foreground",
-  "accent",
-  "accent-foreground",
-  "destructive",
-  "destructive-foreground",
-  "border",
-  "input",
-  "ring",
-  "sidebar",
-  "sidebar-foreground",
-  "sidebar-primary",
-  "sidebar-primary-foreground",
-  "sidebar-accent",
-  "sidebar-accent-foreground",
-  "sidebar-border",
-  "sidebar-ring",
-  "chart-1",
-  "chart-2",
-  "chart-3",
-  "chart-4",
-  "chart-5",
-  "radius"
-];
-new Set(TOKEN_KEYS);
-new Set(MODES);
-
-// src/theme/design-config.ts
-new Set(NAJM_COMPONENT_NAMES);
-function resolveVariantAlias(variants, variant) {
-  if (!variants) return { variant };
-  const seen = /* @__PURE__ */ new Set();
-  let current = variant;
-  let style = variants[current];
-  while (style?.use && !seen.has(current)) {
-    seen.add(current);
-    const next = style.use;
-    if (seen.has(next)) break;
-    current = next;
-    style = variants[current];
-  }
-  return { variant: current, style };
-}
-var buttonVariants = cva(
-  [
-    "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none transition-all",
-    "disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-transparent text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "h-auto p-0 text-primary underline-offset-4 hover:underline",
-        success: "bg-emerald-600 text-white shadow-xs hover:bg-emerald-700",
-        warning: "bg-amber-400 text-slate-950 shadow-xs hover:bg-amber-500",
-        info: "bg-sky-600 text-white shadow-xs hover:bg-sky-700",
-        soft: "bg-primary/10 text-primary shadow-none hover:bg-primary/15",
-        subtle: "bg-muted text-foreground shadow-none hover:bg-muted/80",
-        plain: "bg-transparent shadow-none hover:bg-transparent"
-      },
-      size: {
-        "2xs": "h-5 gap-1 px-1.5 text-[11px] [&_svg:not([class*='size-'])]:size-3",
-        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        md: "h-9 px-4 py-2 has-[>svg]:px-3",
-        lg: "h-10 px-6 has-[>svg]:px-4",
-        xl: "h-12 px-8 text-base [&_svg:not([class*='size-'])]:size-5",
-        "2xl": "h-14 px-10 text-base [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10 [&_svg:not([class*='size-'])]:size-5",
-        "icon-xl": "size-12 [&_svg:not([class*='size-'])]:size-5"
-      },
-      rounded: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        default: "rounded-md",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-xl",
-        "2xl": "rounded-2xl",
-        full: "rounded-full"
-      },
-      fullWidth: {
-        true: "w-full",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      rounded: "default",
-      fullWidth: false
-    }
-  }
-);
-function isPromiseLike(value) {
-  return Boolean(value && typeof value.then === "function");
-}
-var defaultLoader = /* @__PURE__ */ jsx(LoaderCircleIcon, { "aria-hidden": "true", className: "animate-spin" });
-function renderIcon(icon) {
-  if (!icon) return null;
-  return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
-}
-var Button = React5.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    rounded,
-    fullWidth,
-    asChild = false,
-    loading = false,
-    autoLoading = true,
-    disabledWhileLoading = true,
-    loadingText,
-    loader = defaultLoader,
-    loaderPosition = "left",
-    leftIcon,
-    rightIcon,
-    bordered,
-    disabled,
-    children,
-    onClick,
-    style,
-    ...props
-  }, ref) => {
-    const recipe = useNajmComponentStyle("button");
-    const aliased = resolveVariantAlias(
-      recipe?.variants,
-      variant ?? recipe?.defaultVariant ?? "default"
-    );
-    const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
-    const effSize = size ?? recipe?.defaultSize;
-    const recipeRadius = rounded === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
-    const recipeStyle = recipeRadius ? { borderRadius: recipeRadius } : void 0;
-    const [pending, setPending] = React5.useState(false);
-    const isLoading = loading || pending;
-    const isDisabled = disabled || disabledWhileLoading && isLoading;
-    const Comp = asChild ? Slot : "button";
-    const handleClick = React5.useCallback(
-      (event) => {
-        if (isDisabled) {
-          event.preventDefault();
-          return;
-        }
-        const result = onClick?.(event);
-        if (autoLoading && isPromiseLike(result)) {
-          setPending(true);
-          void result.then(
-            () => setPending(false),
-            () => setPending(false)
-          );
-        }
-      },
-      [autoLoading, isDisabled, onClick]
-    );
-    const child = asChild ? React5.Children.only(children) : null;
-    const childContent = asChild && React5.isValidElement(child) ? child.props.children : children;
-    const content = loadingText && isLoading ? loadingText : childContent;
-    const loaderNode = isLoading ? loader : null;
-    const leftIconNode = renderIcon(leftIcon);
-    const rightIconNode = renderIcon(rightIcon);
-    const showCenteredLoader = Boolean(loaderNode && loaderPosition === "center");
-    const renderedContent = showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
-        leftIconNode,
-        content,
-        rightIconNode
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
-      content,
-      loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
-    ] });
-    const renderedChild = asChild && React5.isValidElement(child) ? React5.cloneElement(child, void 0, renderedContent) : renderedContent;
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        "data-slot": "button",
-        "data-loading": isLoading || void 0,
-        "data-disabled": isDisabled || void 0,
-        "data-bordered": effVariant === "outline" ? "true" : bordered === false ? "false" : bordered ? "true" : void 0,
-        "aria-busy": isLoading || void 0,
-        "aria-disabled": asChild && isDisabled ? true : void 0,
-        disabled: !asChild ? isDisabled : void 0,
-        style: recipeStyle ? { ...recipeStyle, ...style } : style,
-        className: cn(
-          buttonVariants({ variant: effVariant, size: effSize, rounded, fullWidth }),
-          aliased.style?.className,
-          // Outline buttons always carry an input-style border.
-          effVariant === "outline" && inputBorderClasses(true),
-          // Filled/ghost/plain/link/success/warning/info/soft/subtle buttons only get a
-          // border when the consumer explicitly opts in via `bordered`. Global theming
-          // should not outline every filled button.
-          effVariant !== "outline" && bordered === true && cn(
-            "border",
-            "border-muted-foreground"
-          ),
-          className
-        ),
-        onClick: handleClick,
-        ...props,
-        children: renderedChild
-      }
-    );
-  }
-);
-Button.displayName = "Button";
 function buildStudioTheme2(colors) {
   return EditorView.theme(
     {
@@ -955,89 +584,5 @@ function JsonEditor({
     )
   ] });
 }
-var TableStoreContext = createContext(null);
-var useTableStore = { use: {} };
-var handler = {
-  get: (_, prop) => () => {
-    const store = useContext(TableStoreContext);
-    if (!store) throw new Error("useTableStore must be used within NTable");
-    return store.use[prop]();
-  }
-};
-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 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,
-    {
-      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 formatJsonValue(value) {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value ?? null, null, 2) ?? String(value);
-  } catch {
-    return String(value);
-  }
-}
-function NTableJson() {
-  const viewMode = useTableStore.use.viewMode();
-  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(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 };
+export { JsonEditor, JsonViewer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
@@ -27,6 +27,11 @@
       "import": "./dist/adapters/next.mjs",
       "default": "./dist/adapters/next.mjs"
     },
+    "./app": {
+      "types": "./dist/adapters/app.d.ts",
+      "import": "./dist/adapters/app.mjs",
+      "default": "./dist/adapters/app.mjs"
+    },
     "./package.json": "./package.json",
     "./json": {
       "types": "./dist/json.d.ts",
@@ -53,6 +58,8 @@
     "react-hook-form": "^7",
     "@hookform/resolvers": "^5",
     "zod": ">=4",
+    "next": ">=14",
+    "najm-i18n": ">=2",
     "@uiw/react-codemirror": "^4.25.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.42.0",
@@ -63,6 +70,12 @@
     "@lezer/highlight": "^1.2.0"
   },
   "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "najm-i18n": {
+      "optional": true
+    },
     "@uiw/react-codemirror": {
       "optional": true
     },
@@ -143,6 +156,7 @@
     "@uiw/react-codemirror": "^4.25.0",
     "@vitejs/plugin-react": "^5.2.0",
     "happy-dom": "^20.11.1",
+    "najm-i18n": "^2.0.3",
     "postcss": "^8.5.22",
     "react-hook-form": "^7",
     "rimraf": "^6",