najm-kit 2.8.2 → 2.10.0

package/dist/{chunk-6OOBAEH2.mjs → chunk-TFHWLE7N.mjs}

@@ -1,118 +1,3 @@
-import { useNajmComponentStyle, cn } from './chunk-KVZACF4G.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";
-}
-
 // src/theme/design-types.ts
 var NAJM_COMPONENT_NAMES = [
   "button",
@@ -536,292 +421,5 @@ function resolveVariantAlias(variants, variant) {
   }
   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 = 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, NAJM_COMPONENT_NAMES, NButton, NIcon, NTableJson, NajmScroll, RADIUS_VALUE_MAP, TableStoreContext, buttonVariants, defineNajmDesignConfig, defineNajmThemeConfig, inputBorderClasses, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, sidebarBorderClasses, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, useNajmScrollViewport, useTableStore };
+export { NAJM_COMPONENT_NAMES, RADIUS_VALUE_MAP, defineNajmDesignConfig, defineNajmThemeConfig, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, stringifyNajmDesignConfig, stringifyNajmThemeConfig };

package/dist/design-config-D_x1GCu3.d.ts

@@ -0,0 +1,17 @@
+import { a as NajmDesignConfig, d as NajmVariantStyle } from './design-types-Rkpt8Pg1.js';
+
+/** Keeps authored TypeScript design objects type-checked without changing them. */
+declare function defineNajmDesignConfig(config: NajmDesignConfig): NajmDesignConfig;
+/** Parses and validates a design config (theme + typography + component recipes). */
+declare function parseNajmDesignConfig(input: unknown): NajmDesignConfig;
+declare function stringifyNajmDesignConfig(config: NajmDesignConfig, space?: number): string;
+/**
+ * Resolves a variant against its recipe, following `use` aliases while guarding
+ * against loops. Returns the effective variant name and merged style.
+ */
+declare function resolveVariantAlias(variants: Record<string, NajmVariantStyle> | undefined, variant: string): {
+    variant: string;
+    style?: NajmVariantStyle;
+};
+
+export { defineNajmDesignConfig as d, parseNajmDesignConfig as p, resolveVariantAlias as r, stringifyNajmDesignConfig as s };

package/dist/design-types-Rkpt8Pg1.d.ts

@@ -0,0 +1,159 @@
+type NajmMode = 'light' | 'dark';
+type NajmAccent = 'neutral' | 'emerald' | 'green' | 'slate' | 'blue' | 'violet';
+type NajmPreset = 'light' | 'dark' | 'dark-emerald' | 'dark-green' | 'dark-slate' | 'dark-blue' | 'dark-violet';
+interface NajmAppearance {
+    /** Global border thickness, e.g. `'0'`, `'1px'`, `'2px'`. `'0'` hides borders. */
+    borderWidth?: string;
+}
+interface NajmThemeTokens {
+    background?: string;
+    foreground?: string;
+    card?: string;
+    'card-foreground'?: string;
+    popover?: string;
+    'popover-foreground'?: string;
+    primary?: string;
+    'primary-foreground'?: string;
+    secondary?: string;
+    'secondary-foreground'?: string;
+    tertiary?: string;
+    'tertiary-foreground'?: string;
+    muted?: string;
+    'muted-foreground'?: string;
+    accent?: string;
+    'accent-foreground'?: string;
+    destructive?: string;
+    'destructive-foreground'?: string;
+    border?: string;
+    input?: string;
+    ring?: string;
+    sidebar?: string;
+    'sidebar-foreground'?: string;
+    'sidebar-primary'?: string;
+    'sidebar-primary-foreground'?: string;
+    'sidebar-accent'?: string;
+    'sidebar-accent-foreground'?: string;
+    'sidebar-border'?: string;
+    'sidebar-ring'?: string;
+    'chart-1'?: string;
+    'chart-2'?: string;
+    'chart-3'?: string;
+    'chart-4'?: string;
+    'chart-5'?: string;
+    radius?: string;
+}
+/** Serializable theme settings suitable for JSON files, APIs, or local storage. */
+interface NajmThemeConfig {
+    preset?: NajmPreset;
+    mode?: NajmMode;
+    accent?: NajmAccent;
+    tokens?: NajmThemeTokens;
+    /**
+     * Per-mode token overrides authored on top of the composed preset. Keeps
+     * light and dark customizations independent: editing a token in one mode
+     * records it here so it survives switching to the other mode and back.
+     * Providers resolve this field on top of the composed mode/accent preset.
+     */
+    overrides?: Partial<Record<NajmMode, NajmThemeTokens>>;
+    accentOnly?: boolean;
+    appearance?: NajmAppearance;
+    radius?: string;
+}
+interface NajmThemeProviderProps {
+    /** Serializable theme settings. Explicit provider props override this config. */
+    config?: NajmThemeConfig;
+    preset?: NajmPreset;
+    mode?: NajmMode;
+    accent?: NajmAccent;
+    tokens?: NajmThemeTokens;
+    /** When true, only inject accent tokens (primary, ring, accent and their foregrounds).
+     *  Everything else (bg, card, fg…) is inherited from the parent cascade. */
+    accentOnly?: boolean;
+    /** App-wide UI preferences (currently global border width). */
+    appearance?: NajmAppearance;
+    /** Global base radius, for example `0`, `0.5rem`, or `0.75rem`. */
+    radius?: string;
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+
+type NajmDensity = "compact" | "default" | "comfortable";
+/** Tailwind's mobile-first viewport breakpoints, plus the default value. */
+type NajmResponsiveBreakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * A scalar value for every viewport, or mobile-first breakpoint overrides.
+ * For example: `{ base: 164, lg: 200, xl: 240 }`.
+ */
+type NajmResponsiveValue<T> = T | Partial<Record<NajmResponsiveBreakpoint, T>>;
+type NajmComponentRadius = "inherit" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | string;
+interface NajmSlotStyle {
+    className?: string;
+    radius?: NajmComponentRadius;
+    borderWidth?: string;
+    padding?: string;
+    paddingTop?: string;
+}
+interface NajmVariantStyle {
+    /** Reuse another variant's recipe. Example: primary badge uses secondary. */
+    use?: string;
+    className?: string;
+    tokens?: Record<string, string>;
+}
+interface NajmComponentStyleConfig {
+    /** Render components that support it as a card-like surface. */
+    card?: boolean;
+    /** Sidebar-only: render section titles above grouped nav items. */
+    showSectionLabels?: boolean;
+    /** Sidebar-only: render separator lines between nav item sections. */
+    showSectionSeparators?: boolean;
+    /** Sidebar-only: expanded width in px (default 240). Supports responsive overrides. */
+    expandedWidth?: NajmResponsiveValue<number>;
+    /** Sidebar-only: collapsed width in px (default 64). Supports responsive overrides. */
+    collapsedWidth?: NajmResponsiveValue<number>;
+    /** Sidebar-only: mobile drawer width in px. Defaults to the expanded width. */
+    mobileWidth?: NajmResponsiveValue<number>;
+    defaultVariant?: string;
+    defaultSize?: string;
+    density?: NajmDensity;
+    /** NTable-only: CSS color used for the table header and add button. */
+    headerColor?: string;
+    /** NTable-only: CSS color used for table header text and add button text. */
+    headerTextColor?: string;
+    /** NTable-only: CSS color used for table container and row borders. */
+    borderColor?: string;
+    radius?: NajmComponentRadius;
+    borderWidth?: string;
+    slots?: Record<string, NajmSlotStyle>;
+    variants?: Record<string, NajmVariantStyle>;
+}
+type NajmComponentName = "button" | "badge" | "card" | "table" | "tabs" | "dialog" | "alert" | "sidebar" | "pageHeader" | "input" | "select" | "dropdown" | "sheet" | "popover" | "tooltip" | "progress" | "avatar";
+type NajmComponentThemeConfig = Partial<Record<NajmComponentName, NajmComponentStyleConfig>>;
+interface NajmTypographyConfig {
+    fontSans?: string;
+    fontHeading?: string;
+    fontMono?: string;
+    baseSize?: string;
+    scale?: "compact" | "default" | "comfortable";
+    lineHeight?: string;
+    letterSpacing?: string;
+}
+interface NajmLayoutConfig {
+    /** Page inline padding, usually used by NPageLayout. */
+    pageGutter?: string;
+    /** Vertical page padding and stacked section gap, usually used by NPageLayout. */
+    sectionGap?: string;
+}
+interface NajmDesignConfig {
+    version: 1;
+    theme: NajmThemeConfig;
+    typography?: NajmTypographyConfig;
+    components?: NajmComponentThemeConfig;
+    layout?: NajmLayoutConfig;
+}
+declare const NAJM_COMPONENT_NAMES: readonly NajmComponentName[];
+/** Maps a NajmComponentRadius keyword to a CSS value (or var). */
+declare const RADIUS_VALUE_MAP: Record<string, string>;
+declare function resolveRadiusValue(radius: NajmComponentRadius | undefined): string | undefined;
+
+export { type NajmComponentThemeConfig as N, RADIUS_VALUE_MAP as R, type NajmDesignConfig as a, type NajmLayoutConfig as b, type NajmTypographyConfig as c, type NajmVariantStyle as d, type NajmMode as e, type NajmThemeProviderProps as f, type NajmAppearance as g, type NajmThemeConfig as h, type NajmAccent as i, type NajmThemeTokens as j, type NajmPreset as k, type NajmComponentName as l, type NajmComponentStyleConfig as m, type NajmResponsiveBreakpoint as n, type NajmResponsiveValue as o, NAJM_COMPONENT_NAMES as p, type NajmComponentRadius as q, type NajmDensity as r, type NajmSlotStyle as s, resolveRadiusValue as t };