najm-kit 2.6.2 → 2.6.4

package/dist/chunk-4DLRXB2W.mjs

@@ -0,0 +1,832 @@
+import { useNajmComponentStyle } from './chunk-YBM5CTE6.mjs';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+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 cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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",
+  "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 ACCENTS = ["neutral", "emerald", "green", "slate", "blue", "violet"];
+var PRESETS = ["light", "dark", "dark-emerald", "dark-green", "dark-slate", "dark-blue", "dark-violet"];
+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"
+];
+var ROOT_KEYS = /* @__PURE__ */ new Set([
+  "preset",
+  "mode",
+  "accent",
+  "tokens",
+  "overrides",
+  "accentOnly",
+  "appearance",
+  "radius"
+]);
+var TOKEN_KEY_SET = new Set(TOKEN_KEYS);
+var MODE_KEY_SET = new Set(MODES);
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function assertKnownKeys(value, keys, path) {
+  const unknown = Object.keys(value).find((key) => !keys.has(key));
+  if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
+}
+function optionalEnum(value, values, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string" || !values.includes(value)) {
+    throw new TypeError(`${path} must be one of: ${values.join(", ")}`);
+  }
+  return value;
+}
+function optionalString(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string" || value.trim() === "") {
+    throw new TypeError(`${path} must be a non-empty string`);
+  }
+  return value;
+}
+function parseTokens(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord(value)) throw new TypeError("theme.tokens must be an object");
+  assertKnownKeys(value, TOKEN_KEY_SET, "theme.tokens");
+  const tokens = {};
+  for (const key of TOKEN_KEYS) {
+    const token = optionalString(value[key], `theme.tokens.${key}`);
+    if (token !== void 0) tokens[key] = token;
+  }
+  return tokens;
+}
+function parseOverrides(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord(value)) throw new TypeError("theme.overrides must be an object");
+  assertKnownKeys(value, MODE_KEY_SET, "theme.overrides");
+  const overrides = {};
+  for (const mode of MODES) {
+    const entry = value[mode];
+    if (entry === void 0) continue;
+    overrides[mode] = parseTokens(entry) ?? {};
+  }
+  return overrides;
+}
+function defineNajmThemeConfig(config) {
+  return config;
+}
+function parseNajmThemeConfig(input) {
+  let value = input;
+  if (typeof input === "string") {
+    try {
+      value = JSON.parse(input);
+    } catch (error) {
+      throw new TypeError(`Invalid theme JSON: ${error.message}`);
+    }
+  }
+  if (!isRecord(value)) throw new TypeError("Theme config must be an object");
+  assertKnownKeys(value, ROOT_KEYS, "theme");
+  let appearance;
+  if (value.appearance !== void 0) {
+    if (!isRecord(value.appearance)) throw new TypeError("theme.appearance must be an object");
+    assertKnownKeys(value.appearance, /* @__PURE__ */ new Set(["borderWidth"]), "theme.appearance");
+    appearance = {
+      borderWidth: optionalString(
+        value.appearance.borderWidth,
+        "theme.appearance.borderWidth"
+      )
+    };
+  }
+  const accentOnly = value.accentOnly;
+  if (accentOnly !== void 0 && typeof accentOnly !== "boolean") {
+    throw new TypeError("theme.accentOnly must be a boolean");
+  }
+  const parsedAccentOnly = typeof accentOnly === "boolean" ? accentOnly : void 0;
+  const config = {};
+  const preset = optionalEnum(value.preset, PRESETS, "theme.preset");
+  const mode = optionalEnum(value.mode, MODES, "theme.mode");
+  const accent = optionalEnum(value.accent, ACCENTS, "theme.accent");
+  const tokens = parseTokens(value.tokens);
+  const overrides = parseOverrides(value.overrides);
+  const radius = optionalString(value.radius, "theme.radius");
+  if (preset !== void 0) config.preset = preset;
+  if (mode !== void 0) config.mode = mode;
+  if (accent !== void 0) config.accent = accent;
+  if (tokens !== void 0) config.tokens = tokens;
+  if (overrides !== void 0) config.overrides = overrides;
+  if (parsedAccentOnly !== void 0) config.accentOnly = parsedAccentOnly;
+  if (appearance !== void 0) config.appearance = appearance;
+  if (radius !== void 0) config.radius = radius;
+  return config;
+}
+function stringifyNajmThemeConfig(config, space = 2) {
+  return JSON.stringify(config, null, space);
+}
+
+// src/theme/design-config.ts
+var ROOT_KEYS2 = /* @__PURE__ */ new Set(["version", "theme", "typography", "components", "layout"]);
+var TYPOGRAPHY_KEYS = /* @__PURE__ */ new Set([
+  "fontSans",
+  "fontHeading",
+  "fontMono",
+  "baseSize",
+  "scale",
+  "lineHeight",
+  "letterSpacing"
+]);
+var LAYOUT_KEYS = /* @__PURE__ */ new Set(["pageGutter", "sectionGap"]);
+var COMPONENT_KEYS = /* @__PURE__ */ new Set([
+  "card",
+  "showSectionLabels",
+  "showSectionSeparators",
+  "expandedWidth",
+  "collapsedWidth",
+  "mobileWidth",
+  "defaultVariant",
+  "defaultSize",
+  "density",
+  "headerColor",
+  "headerTextColor",
+  "borderColor",
+  "radius",
+  "borderWidth",
+  "slots",
+  "variants"
+]);
+var SLOT_KEYS = /* @__PURE__ */ new Set(["className", "radius", "borderWidth", "padding", "paddingTop"]);
+var VARIANT_KEYS = /* @__PURE__ */ new Set(["use", "className", "tokens"]);
+var COMPONENT_NAME_SET = new Set(NAJM_COMPONENT_NAMES);
+var DENSITIES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
+var SCALES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
+var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["base", "sm", "md", "lg", "xl", "2xl"]);
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function assertKnownKeys2(value, keys, path) {
+  const unknown = Object.keys(value).find((key) => !keys.has(key));
+  if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
+}
+function optionalString2(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string") {
+    throw new TypeError(`${path} must be a string`);
+  }
+  return value;
+}
+function optionalBoolean(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "boolean") {
+    throw new TypeError(`${path} must be a boolean`);
+  }
+  return value;
+}
+function optionalResponsiveNumber(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  if (!isRecord2(value)) throw new TypeError(`${path} must be a number or breakpoint object`);
+  const unknown = Object.keys(value).find((key) => !RESPONSIVE_BREAKPOINTS.has(key));
+  if (unknown) throw new TypeError(`Unknown ${path} breakpoint: ${unknown}`);
+  const parsed = {};
+  for (const [breakpoint, width] of Object.entries(value)) {
+    if (typeof width !== "number") {
+      throw new TypeError(`${path}.${breakpoint} must be a number`);
+    }
+    parsed[breakpoint] = width;
+  }
+  return parsed;
+}
+function optionalEnum2(value, values, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string" || !values.has(value)) {
+    throw new TypeError(`${path} must be one of: ${[...values].join(", ")}`);
+  }
+  return value;
+}
+function parseTypography(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord2(value)) throw new TypeError("typography must be an object");
+  assertKnownKeys2(value, TYPOGRAPHY_KEYS, "typography");
+  const cfg = {};
+  const fontSans = optionalString2(value.fontSans, "typography.fontSans");
+  const fontHeading = optionalString2(value.fontHeading, "typography.fontHeading");
+  const fontMono = optionalString2(value.fontMono, "typography.fontMono");
+  const baseSize = optionalString2(value.baseSize, "typography.baseSize");
+  const scale = optionalEnum2(value.scale, SCALES, "typography.scale");
+  const lineHeight = optionalString2(value.lineHeight, "typography.lineHeight");
+  const letterSpacing = optionalString2(value.letterSpacing, "typography.letterSpacing");
+  if (fontSans !== void 0) cfg.fontSans = fontSans;
+  if (fontHeading !== void 0) cfg.fontHeading = fontHeading;
+  if (fontMono !== void 0) cfg.fontMono = fontMono;
+  if (baseSize !== void 0) cfg.baseSize = baseSize;
+  if (scale !== void 0) cfg.scale = scale;
+  if (lineHeight !== void 0) cfg.lineHeight = lineHeight;
+  if (letterSpacing !== void 0) cfg.letterSpacing = letterSpacing;
+  return cfg;
+}
+function parseLayout(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord2(value)) throw new TypeError("layout must be an object");
+  assertKnownKeys2(value, LAYOUT_KEYS, "layout");
+  const cfg = {};
+  const pageGutter = optionalString2(value.pageGutter, "layout.pageGutter");
+  const sectionGap = optionalString2(value.sectionGap, "layout.sectionGap");
+  if (pageGutter !== void 0) cfg.pageGutter = pageGutter;
+  if (sectionGap !== void 0) cfg.sectionGap = sectionGap;
+  return cfg;
+}
+function parseVariant(value, path) {
+  if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
+  assertKnownKeys2(value, VARIANT_KEYS, path);
+  const variant = {};
+  const use = optionalString2(value.use, `${path}.use`);
+  const className = optionalString2(value.className, `${path}.className`);
+  if (use !== void 0) variant.use = use;
+  if (className !== void 0) variant.className = className;
+  if (value.tokens !== void 0) {
+    if (!isRecord2(value.tokens)) throw new TypeError(`${path}.tokens must be an object`);
+    variant.tokens = value.tokens;
+  }
+  return variant;
+}
+function parseComponentStyle(value, path) {
+  if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
+  assertKnownKeys2(value, COMPONENT_KEYS, path);
+  const cfg = {};
+  const card = optionalBoolean(value.card, `${path}.card`);
+  const showSectionLabels = optionalBoolean(value.showSectionLabels, `${path}.showSectionLabels`);
+  const showSectionSeparators = optionalBoolean(value.showSectionSeparators, `${path}.showSectionSeparators`);
+  const expandedWidth = optionalResponsiveNumber(value.expandedWidth, `${path}.expandedWidth`);
+  const collapsedWidth = optionalResponsiveNumber(value.collapsedWidth, `${path}.collapsedWidth`);
+  const mobileWidth = optionalResponsiveNumber(value.mobileWidth, `${path}.mobileWidth`);
+  const defaultVariant = optionalString2(value.defaultVariant, `${path}.defaultVariant`);
+  const defaultSize = optionalString2(value.defaultSize, `${path}.defaultSize`);
+  const density = optionalEnum2(value.density, DENSITIES, `${path}.density`);
+  const headerColor = optionalString2(value.headerColor, `${path}.headerColor`);
+  const headerTextColor = optionalString2(value.headerTextColor, `${path}.headerTextColor`);
+  const borderColor = optionalString2(value.borderColor, `${path}.borderColor`);
+  const radius = optionalString2(value.radius, `${path}.radius`);
+  const borderWidth = optionalString2(value.borderWidth, `${path}.borderWidth`);
+  if (card !== void 0) cfg.card = card;
+  if (showSectionLabels !== void 0) cfg.showSectionLabels = showSectionLabels;
+  if (showSectionSeparators !== void 0) cfg.showSectionSeparators = showSectionSeparators;
+  if (expandedWidth !== void 0) cfg.expandedWidth = expandedWidth;
+  if (collapsedWidth !== void 0) cfg.collapsedWidth = collapsedWidth;
+  if (mobileWidth !== void 0) cfg.mobileWidth = mobileWidth;
+  if (defaultVariant !== void 0) cfg.defaultVariant = defaultVariant;
+  if (defaultSize !== void 0) cfg.defaultSize = defaultSize;
+  if (density !== void 0) cfg.density = density;
+  if (headerColor !== void 0) cfg.headerColor = headerColor;
+  if (headerTextColor !== void 0) cfg.headerTextColor = headerTextColor;
+  if (borderColor !== void 0) cfg.borderColor = borderColor;
+  if (radius !== void 0) cfg.radius = radius;
+  if (borderWidth !== void 0) cfg.borderWidth = borderWidth;
+  if (value.slots !== void 0) {
+    if (!isRecord2(value.slots)) throw new TypeError(`${path}.slots must be an object`);
+    const slots = {};
+    for (const [slotName, slotValue] of Object.entries(value.slots)) {
+      if (!isRecord2(slotValue)) throw new TypeError(`${path}.slots.${slotName} must be an object`);
+      assertKnownKeys2(slotValue, SLOT_KEYS, `${path}.slots.${slotName}`);
+      slots[slotName] = slotValue;
+    }
+    cfg.slots = slots;
+  }
+  if (value.variants !== void 0) {
+    if (!isRecord2(value.variants)) throw new TypeError(`${path}.variants must be an object`);
+    const variants = {};
+    for (const [variantName, variantValue] of Object.entries(value.variants)) {
+      variants[variantName] = parseVariant(variantValue, `${path}.variants.${variantName}`);
+    }
+    cfg.variants = variants;
+  }
+  return cfg;
+}
+function parseComponents(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord2(value)) throw new TypeError("components must be an object");
+  const unknown = Object.keys(value).find((key) => !COMPONENT_NAME_SET.has(key));
+  if (unknown) throw new TypeError(`Unknown component name: ${unknown}`);
+  const components = {};
+  for (const [name, cfg] of Object.entries(value)) {
+    components[name] = parseComponentStyle(cfg, `components.${name}`);
+  }
+  return components;
+}
+function defineNajmDesignConfig(config) {
+  return config;
+}
+function parseNajmDesignConfig(input) {
+  let value = input;
+  if (typeof input === "string") {
+    try {
+      value = JSON.parse(input);
+    } catch (error) {
+      throw new TypeError(`Invalid design JSON: ${error.message}`);
+    }
+  }
+  if (!isRecord2(value)) throw new TypeError("Design config must be an object");
+  if (!("version" in value) && !("theme" in value)) {
+    return {
+      version: 1,
+      theme: parseNajmThemeConfig(value)
+    };
+  }
+  assertKnownKeys2(value, ROOT_KEYS2, "design");
+  if (value.version !== void 0 && value.version !== 1) {
+    throw new TypeError("design.version must be 1");
+  }
+  if (value.theme === void 0) throw new TypeError("design.theme is required");
+  const config = {
+    version: 1,
+    theme: parseNajmThemeConfig(value.theme)
+  };
+  const typography = parseTypography(value.typography);
+  if (typography !== void 0) config.typography = typography;
+  const components = parseComponents(value.components);
+  if (components !== void 0) config.components = components;
+  const layout = parseLayout(value.layout);
+  if (layout !== void 0) config.layout = layout;
+  return config;
+}
+function stringifyNajmDesignConfig(config, space = 2) {
+  return JSON.stringify(config, null, space);
+}
+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 = 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, cn, defineNajmDesignConfig, defineNajmThemeConfig, inputBorderClasses, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, sidebarBorderClasses, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, useNajmScrollViewport, useTableStore };