najm-kit 2.8.2 → 2.9.0

package/dist/chunk-7H6NFBQT.mjs

@@ -0,0 +1,75 @@
+// src/server/uiBootstrap.ts
+var MISSING = Symbol("najm-kit/server: missing envelope");
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function selectData(payload) {
+  return isRecord(payload) && "data" in payload ? payload.data : MISSING;
+}
+function describeThrown(value) {
+  return value instanceof Error ? `${value.name}: ${value.message}` : `non-error thrown: ${typeof value}`;
+}
+function createUiBootstrapLoader(config) {
+  const { fetcher, resources, onDiagnostic } = config;
+  const selectEnvelope = config.select ?? selectData;
+  const names = Object.keys(resources);
+  const report = (diagnostic) => {
+    if (!onDiagnostic) return;
+    try {
+      onDiagnostic(diagnostic);
+    } catch {
+    }
+  };
+  async function loadOne(name) {
+    const resource = resources[name];
+    const { path } = resource;
+    const select = resource.select ?? selectEnvelope;
+    const fail = (reason, detail = {}) => {
+      report({ resource: name, reason, path, ...detail });
+      return resource.fallback();
+    };
+    let response;
+    try {
+      response = await fetcher(path);
+    } catch (cause) {
+      return fail("fetch-failed", { error: describeThrown(cause) });
+    }
+    if (!response.ok) return fail("response-not-ok", { status: response.status });
+    let payload;
+    try {
+      payload = await response.json();
+    } catch (cause) {
+      return fail("invalid-json", { error: describeThrown(cause) });
+    }
+    let data;
+    try {
+      data = select(payload);
+    } catch (cause) {
+      return fail("invalid-envelope", { error: describeThrown(cause) });
+    }
+    if (data === MISSING) return fail("invalid-envelope");
+    try {
+      const parsed = resource.parse(data);
+      if (parsed !== void 0) return parsed;
+    } catch (cause) {
+      return fail("invalid-payload", { error: describeThrown(cause) });
+    }
+    return fail("invalid-payload");
+  }
+  const loaders = Object.fromEntries(
+    names.map((name) => [name, () => loadOne(name)])
+  );
+  async function load() {
+    const pending = names.map((name) => loadOne(name));
+    const settled = await Promise.all(pending);
+    const snapshot = {};
+    names.forEach((name, index) => {
+      snapshot[name] = settled[index];
+    });
+    Object.freeze(snapshot);
+    return snapshot;
+  }
+  return { load, loadResource: (name) => loaders[name](), loaders };
+}
+
+export { createUiBootstrapLoader };

package/dist/chunk-JUYT2ISO.mjs

@@ -0,0 +1,404 @@
+import { useNajmComponentStyle, cn } from './chunk-KVZACF4G.mjs';
+import { resolveVariantAlias, resolveRadiusValue } from './chunk-TFHWLE7N.mjs';
+import * as React2 from 'react';
+import React2__default, { createContext, useContext } from 'react';
+import * as LucideIcons from 'lucide-react';
+import { LoaderCircleIcon } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { OverlayScrollbars } from 'overlayscrollbars';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+
+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 (React2__default.isValidElement(icon)) {
+    return React2__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";
+
+// src/theme/borders.ts
+var SURFACE_BORDER_CLASSES = {
+  all: "najm-border border-border",
+  top: "najm-border-t border-border",
+  right: "najm-border-r border-border",
+  bottom: "najm-border-b border-border",
+  left: "najm-border-l border-border"
+};
+var SIDEBAR_BORDER_CLASSES = {
+  all: "najm-border border-sidebar-border",
+  top: "najm-border-t border-sidebar-border",
+  right: "najm-border-r border-sidebar-border",
+  bottom: "najm-border-b border-sidebar-border",
+  left: "najm-border-l border-sidebar-border"
+};
+var BORDER_RESET_CLASSES = {
+  all: "border-0",
+  top: "border-t-0",
+  right: "border-r-0",
+  bottom: "border-b-0",
+  left: "border-l-0"
+};
+function surfaceBorderClasses(bordered = true, side = "all") {
+  return bordered === false ? BORDER_RESET_CLASSES[side] : SURFACE_BORDER_CLASSES[side];
+}
+function sidebarBorderClasses(bordered = true, side = "all") {
+  return bordered === false ? BORDER_RESET_CLASSES[side] : SIDEBAR_BORDER_CLASSES[side];
+}
+function inputBorderClasses(bordered = true) {
+  return bordered === false ? "border-0" : "najm-border border-input";
+}
+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 = React2.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] = React2.useState(false);
+    const isLoading = loading || pending;
+    const isDisabled = disabled || disabledWhileLoading && isLoading;
+    const Comp = asChild ? Slot : "button";
+    const handleClick = React2.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 ? React2.Children.only(children) : null;
+    const childContent = asChild && React2.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 && React2.isValidElement(child) ? React2.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";
+var NButton = Button;
+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 = React2.useRef(null);
+  const viewportRef = React2.useRef(null);
+  React2.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
+    }
+  );
+}
+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 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 { Button, NButton, NIcon, NTableJson, NajmScroll, TableStoreContext, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses, useNajmScrollViewport, useTableStore };