najm-kit 0.0.20 → 0.0.22

package/dist/index.d.ts

@@ -91,7 +91,7 @@ interface NajmThemeConfig {
      * 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.
-     * The provider ignores this field — consumers compose `tokens` from it.
+     * Providers resolve this field on top of the composed mode/accent preset.
      */
     overrides?: Partial<Record<NajmMode, NajmThemeTokens>>;
     accentOnly?: boolean;
@@ -170,6 +170,12 @@ interface NajmComponentStyleConfig {
     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>;
@@ -214,6 +220,7 @@ declare function useNajmDesign(): NajmDesignContextValue;
 declare function useNajmComponentStyle(name: NajmComponentName): NajmComponentStyleConfig | undefined;
 interface NajmDesignProviderProps {
     config: NajmDesignConfig;
+    mode?: NajmMode;
     className?: string;
     children: React$1.ReactNode;
 }
@@ -222,7 +229,7 @@ interface NajmDesignProviderProps {
  * tokens, applies typography CSS variables, and exposes component recipes via
  * context. NajmThemeProvider continues to work standalone for token-only needs.
  */
-declare function NajmDesignProvider({ config, className, children, }: NajmDesignProviderProps): react_jsx_runtime.JSX.Element;
+declare function NajmDesignProvider({ config, mode, className, children, }: NajmDesignProviderProps): react_jsx_runtime.JSX.Element;
 
 /** Keeps authored TypeScript design objects type-checked without changing them. */
 declare function defineNajmDesignConfig(config: NajmDesignConfig): NajmDesignConfig;
@@ -2267,6 +2274,8 @@ interface TableState {
     bordered?: boolean;
     headerClassName: string;
     headerColor: string | undefined;
+    headerTextColor: string | undefined;
+    borderColor: string | undefined;
     showCheckbox: boolean;
     selectedRowId: string | null;
     headerSlot: ReactNode | null;
@@ -2380,6 +2389,8 @@ declare const createTableStore: () => {
         bordered?: () => boolean;
         headerClassName: () => string;
         headerColor: () => string;
+        headerTextColor: () => string;
+        borderColor: () => string;
         showCheckbox: () => boolean;
         selectedRowId: () => string;
         headerSlot: () => ReactNode;
@@ -2459,44 +2470,16 @@ declare const createTableStore: () => {
     };
 };
 
-declare const HEADER_COLORS: {
-    readonly primary: {
-        readonly bg: "bg-primary/15";
-        readonly text: "[&_th]:text-foreground";
-        readonly row: "hover:bg-primary/5";
-    };
-    readonly violet: {
-        readonly bg: "bg-violet-600/30";
-        readonly text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300";
-        readonly row: "hover:bg-violet-500/5";
-    };
-    readonly blue: {
-        readonly bg: "bg-blue-600/30";
-        readonly text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300";
-        readonly row: "hover:bg-blue-500/5";
-    };
-    readonly emerald: {
-        readonly bg: "bg-emerald-600/30";
-        readonly text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400";
-        readonly row: "hover:bg-emerald-500/5";
-    };
-    readonly amber: {
-        readonly bg: "bg-amber-500/30";
-        readonly text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300";
-        readonly row: "hover:bg-amber-500/5";
-    };
-    readonly rose: {
-        readonly bg: "bg-rose-600/30";
-        readonly text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300";
-        readonly row: "hover:bg-rose-500/5";
-    };
-    readonly slate: {
-        readonly bg: "bg-slate-700/60";
-        readonly text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400";
-        readonly row: "hover:bg-slate-500/5";
-    };
+declare const TABLE_HEADER_COLOR_PRESETS: {
+    readonly primary: "var(--primary)";
+    readonly violet: "#7c3aed";
+    readonly blue: "#2563eb";
+    readonly emerald: "#059669";
+    readonly amber: "#f59e0b";
+    readonly rose: "#e11d48";
+    readonly slate: "#475569";
 };
-type TableHeaderColor = keyof typeof HEADER_COLORS;
+type TableHeaderColor = keyof typeof TABLE_HEADER_COLOR_PRESETS;
 
 interface NTableState {
     sorting: SortingState;
@@ -2595,7 +2578,12 @@ interface NTableProps<T = any, M extends ViewMode = ViewMode> {
     toolbarLabels?: boolean;
     dynamicHeight?: boolean;
     headerClassName?: string;
-    headerColor?: TableHeaderColor;
+    /** CSS color or Najm token name for the table header background. Defaults to primary. */
+    headerColor?: string;
+    /** CSS color or Najm token name for table header text. Defaults to primary foreground. */
+    headerTextColor?: string;
+    /** CSS color or Najm token name for table borders. Defaults to border. */
+    borderColor?: string;
     showCheckbox?: boolean;
     onRowClick?: (row: T) => void;
     onRowContextMenu?: (e: React__default.MouseEvent, row: T) => void;
@@ -2757,6 +2745,8 @@ declare const TableStoreContext: React$1.Context<{
         bordered?: () => boolean;
         headerClassName: () => string;
         headerColor: () => string;
+        headerTextColor: () => string;
+        borderColor: () => string;
         showCheckbox: () => boolean;
         selectedRowId: () => string;
         headerSlot: () => React$1.ReactNode;
@@ -2874,6 +2864,8 @@ declare function useStoreSync(props: any): {
         bordered?: () => boolean;
         headerClassName: () => string;
         headerColor: () => string;
+        headerTextColor: () => string;
+        borderColor: () => string;
         showCheckbox: () => boolean;
         selectedRowId: () => string;
         headerSlot: () => React__default.ReactNode;

package/dist/index.mjs

@@ -228,6 +228,33 @@ function radiusToStyle(radius, scale) {
   }
   return style;
 }
+function resolveThemeTokens({
+  preset,
+  mode,
+  accent,
+  explicitTokens,
+  configTokens,
+  configMode,
+  overrides
+}) {
+  if (explicitTokens) return explicitTokens;
+  const tokenMode = mode ?? configMode;
+  const modeOverrides = tokenMode ? overrides?.[tokenMode] : void 0;
+  const tokensMatchMode = !configMode || !tokenMode || configMode === tokenMode;
+  const scopedTokens = tokensMatchMode ? configTokens : void 0;
+  if (preset) {
+    return { ...resolvePreset(preset), ...scopedTokens ?? {}, ...modeOverrides ?? {} };
+  }
+  if (tokenMode) {
+    return {
+      ...composePreset(tokenMode, accent ?? "neutral"),
+      ...scopedTokens ?? {},
+      ...modeOverrides ?? {}
+    };
+  }
+  if (scopedTokens || modeOverrides) return { ...scopedTokens ?? {}, ...modeOverrides ?? {} };
+  return null;
+}
 var NajmThemeDepthContext = React.createContext(0);
 var NajmThemeContainerCtx = React.createContext(null);
 var DEFAULT_APPEARANCE = {};
@@ -255,19 +282,30 @@ function NajmThemeProvider({
   const effectivePreset = preset ?? config?.preset;
   const effectiveMode = mode ?? config?.mode;
   const effectiveAccent = accent ?? config?.accent;
-  const effectiveTokens = tokens ?? config?.tokens;
   const effectiveAccentOnly = accentOnly ?? config?.accentOnly;
   const effectiveRadius = radius ?? config?.radius;
   const effectiveRadiusScale = radiusScale ?? config?.radiusScale ?? "shadcn";
   const effectiveSpacing = spacing ?? config?.spacing;
   const effectiveBorderWidth = appearance?.borderWidth ?? config?.appearance?.borderWidth;
-  const shouldApplyThemeTokens = Boolean(effectivePreset || effectiveMode || effectiveTokens);
   const resolved = React.useMemo(() => {
-    if (!shouldApplyThemeTokens) return null;
-    if (effectiveTokens) return effectiveTokens;
-    if (effectivePreset) return resolvePreset(effectivePreset);
-    return composePreset(effectiveMode, effectiveAccent ?? "neutral");
-  }, [effectivePreset, effectiveMode, effectiveAccent, effectiveTokens, shouldApplyThemeTokens]);
+    return resolveThemeTokens({
+      preset: effectivePreset,
+      mode: effectiveMode,
+      accent: effectiveAccent,
+      explicitTokens: tokens,
+      configTokens: config?.tokens,
+      configMode: config?.mode,
+      overrides: config?.overrides
+    });
+  }, [
+    effectivePreset,
+    effectiveMode,
+    effectiveAccent,
+    tokens,
+    config?.tokens,
+    config?.mode,
+    config?.overrides
+  ]);
   const style = React.useMemo(
     () => {
       const tokenStyle = resolved ? tokensToStyle(resolved, effectiveAccentOnly) : void 0;
@@ -344,12 +382,15 @@ var ROOT_KEYS = /* @__PURE__ */ new Set([
   "mode",
   "accent",
   "tokens",
+  "overrides",
   "accentOnly",
   "appearance",
   "radius",
-  "radiusScale"
+  "radiusScale",
+  "spacing"
 ]);
 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);
 }
@@ -382,6 +423,18 @@ function parseTokens(value) {
   }
   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;
 }
@@ -417,16 +470,20 @@ function parseNajmThemeConfig(input) {
   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");
   const radiusScale = optionalEnum(value.radiusScale, RADIUS_SCALES, "theme.radiusScale");
+  const spacing = optionalString(value.spacing, "theme.spacing");
   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;
   if (radiusScale !== void 0) config.radiusScale = radiusScale;
+  if (spacing !== void 0) config.spacing = spacing;
   return config;
 }
 function stringifyNajmThemeConfig(config, space = 2) {
@@ -466,6 +523,7 @@ function layoutToStyle(layout) {
 }
 function NajmDesignProvider({
   config,
+  mode,
   className,
   children
 }) {
@@ -485,7 +543,7 @@ function NajmDesignProvider({
     () => ({ ...layoutStyle ?? {}, ...typographyStyle ?? {} }),
     [layoutStyle, typographyStyle]
   );
-  return /* @__PURE__ */ jsx(NajmDesignContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(NajmThemeProvider, { config: config.theme, className, children: layoutStyle || typographyStyle ? (
+  return /* @__PURE__ */ jsx(NajmDesignContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(NajmThemeProvider, { config: config.theme, mode, className, children: layoutStyle || typographyStyle ? (
     // `display: contents` lets design CSS variables cascade to
     // children without introducing a layout box that would break height
     // chains (e.g. h-full) in the consuming app.
@@ -545,6 +603,9 @@ var COMPONENT_KEYS = /* @__PURE__ */ new Set([
   "defaultVariant",
   "defaultSize",
   "density",
+  "headerColor",
+  "headerTextColor",
+  "borderColor",
   "radius",
   "borderWidth",
   "slots",
@@ -639,6 +700,9 @@ function parseComponentStyle(value, path) {
   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;
@@ -647,6 +711,9 @@ function parseComponentStyle(value, path) {
   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) {
@@ -1233,41 +1300,41 @@ var badgeColorVariants = cva(
       }
     },
     compoundVariants: [
-      { color: "primary", look: "solid", class: "bg-pink-500 text-white" },
-      { color: "primary", look: "soft", class: "bg-pink-500/10 text-pink-400 border-pink-500/20" },
-      { color: "primary", look: ["outline", "dash"], class: "text-pink-400 border-pink-500/60" },
-      { color: "secondary", look: "solid", class: "bg-indigo-500 text-white" },
-      { color: "secondary", look: "soft", class: "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" },
-      { color: "secondary", look: ["outline", "dash"], class: "text-indigo-400 border-indigo-500/60" },
-      { color: "accent", look: "solid", class: "bg-orange-500 text-white" },
-      { color: "accent", look: "soft", class: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
-      { color: "accent", look: ["outline", "dash"], class: "text-orange-400 border-orange-500/60" },
-      { color: "neutral", look: "solid", class: "bg-slate-500 text-white" },
-      { color: "neutral", look: "soft", class: "bg-slate-500/10 text-slate-400 border-slate-500/20" },
-      { color: "neutral", look: ["outline", "dash"], class: "text-slate-400 border-slate-500/60" },
-      { color: "info", look: "solid", class: "bg-sky-500 text-white" },
-      { color: "info", look: "soft", class: "bg-sky-500/10 text-sky-400 border-sky-500/20" },
-      { color: "info", look: ["outline", "dash"], class: "text-sky-400 border-sky-500/60" },
-      { color: "success", look: "solid", class: "bg-emerald-500 text-white" },
-      { color: "success", look: "soft", class: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
-      { color: "success", look: ["outline", "dash"], class: "text-emerald-400 border-emerald-500/60" },
-      { color: "warning", look: "solid", class: "bg-amber-400 text-slate-900" },
-      { color: "warning", look: "soft", class: "bg-amber-400/10 text-amber-400 border-amber-400/20" },
-      { color: "warning", look: ["outline", "dash"], class: "text-amber-400 border-amber-400/60" },
-      { color: "destructive", look: "solid", class: "bg-red-500 text-white" },
-      { color: "destructive", look: "soft", class: "bg-red-500/10 text-red-400 border-red-500/20" },
-      { color: "destructive", look: ["outline", "dash"], class: "text-red-400 border-red-500/60" }
+      { color: "primary", look: "solid", class: "bg-primary text-primary-foreground" },
+      { color: "primary", look: "soft", class: "bg-primary/10 text-primary border-primary/20" },
+      { color: "primary", look: ["outline", "dash"], class: "text-primary border-primary/60" },
+      { color: "secondary", look: "solid", class: "bg-secondary text-secondary-foreground" },
+      { color: "secondary", look: "soft", class: "bg-secondary/10 text-secondary-foreground border-secondary/30" },
+      { color: "secondary", look: ["outline", "dash"], class: "text-secondary-foreground border-secondary/40" },
+      { color: "accent", look: "solid", class: "bg-accent text-accent-foreground" },
+      { color: "accent", look: "soft", class: "bg-accent/10 text-accent-foreground border-accent/30" },
+      { color: "accent", look: ["outline", "dash"], class: "text-accent-foreground border-accent/40" },
+      { color: "neutral", look: "solid", class: "bg-neutral text-neutral-foreground" },
+      { color: "neutral", look: "soft", class: "bg-neutral/10 text-neutral-foreground border-neutral/30" },
+      { color: "neutral", look: ["outline", "dash"], class: "text-neutral-foreground border-neutral/40" },
+      { color: "info", look: "solid", class: "bg-info text-info-foreground" },
+      { color: "info", look: "soft", class: "bg-info/10 text-info border-info/20" },
+      { color: "info", look: ["outline", "dash"], class: "text-info border-info/60" },
+      { color: "success", look: "solid", class: "bg-success text-success-foreground" },
+      { color: "success", look: "soft", class: "bg-success/10 text-success border-success/20" },
+      { color: "success", look: ["outline", "dash"], class: "text-success border-success/60" },
+      { color: "warning", look: "solid", class: "bg-warning text-warning-foreground" },
+      { color: "warning", look: "soft", class: "bg-warning/10 text-warning border-warning/20" },
+      { color: "warning", look: ["outline", "dash"], class: "text-warning border-warning/60" },
+      { color: "destructive", look: "solid", class: "bg-destructive text-destructive-foreground" },
+      { color: "destructive", look: "soft", class: "bg-destructive/10 text-destructive border-destructive/20" },
+      { color: "destructive", look: ["outline", "dash"], class: "text-destructive border-destructive/60" }
     ],
     defaultVariants: { color: "primary", look: "solid", size: "md", shape: "default" }
   }
 );
 var COLOR_TEXT_MAP = {
-  success: "text-emerald-600",
-  warning: "text-amber-500",
-  accent: "text-orange-500",
-  info: "text-sky-600",
-  neutral: "text-slate-500",
-  destructive: "text-red-600"
+  success: "text-success",
+  warning: "text-warning",
+  accent: "text-accent-foreground",
+  info: "text-info",
+  neutral: "text-neutral-foreground",
+  destructive: "text-destructive"
 };
 var SIZE_TEXT_MAP = {
   sm: "text-xs",
@@ -1306,7 +1373,7 @@ function Badge({
   const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
   const recipeRadius = shape === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
   const recipeStyle = recipeRadius ? { borderRadius: recipeRadius, ...style } : style;
-  const resolvedColor = statusMap?.[status ?? ""] ?? color;
+  const resolvedColor = statusMap?.[status ?? ""] ?? color ?? "primary";
   const resolvedLabel = label ?? (typeof children === "string" ? children : void 0) ?? status;
   const content = typeof children !== "string" && children ? children : resolvedLabel ?? children;
   const resolvedIcon = icon ?? (resolvedColor ? iconMap?.[resolvedColor] : void 0);
@@ -7893,7 +7960,9 @@ var createTableStore = () => {
     classNames: {},
     bordered: void 0,
     headerClassName: "bg-card",
-    headerColor: "primary",
+    headerColor: void 0,
+    headerTextColor: void 0,
+    borderColor: void 0,
     showCheckbox: true,
     selectedRowId: null,
     headerSlot: null,
@@ -8303,17 +8372,47 @@ function useTableKeyboard(options = {}) {
 }
 
 // src/components/table/tableColors.ts
-var HEADER_COLORS = {
-  primary: { bg: "bg-primary/15", text: "[&_th]:text-foreground", row: "hover:bg-primary/5" },
-  violet: { bg: "bg-violet-600/30", text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300", row: "hover:bg-violet-500/5" },
-  blue: { bg: "bg-blue-600/30", text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300", row: "hover:bg-blue-500/5" },
-  emerald: { bg: "bg-emerald-600/30", text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400", row: "hover:bg-emerald-500/5" },
-  amber: { bg: "bg-amber-500/30", text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300", row: "hover:bg-amber-500/5" },
-  rose: { bg: "bg-rose-600/30", text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300", row: "hover:bg-rose-500/5" },
-  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400", row: "hover:bg-slate-500/5" }
-};
-var HEADER_HEX = {
-  primary: "",
+var DEFAULT_TABLE_HEADER_COLOR = "var(--primary)";
+var DEFAULT_TABLE_HEADER_TEXT_COLOR = "var(--primary-foreground)";
+var DEFAULT_TABLE_BORDER_COLOR = "var(--border)";
+var THEME_COLOR_TOKENS = /* @__PURE__ */ new Set([
+  "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"
+]);
+var TABLE_HEADER_COLOR_PRESETS = {
+  primary: DEFAULT_TABLE_HEADER_COLOR,
   violet: "#7c3aed",
   blue: "#2563eb",
   emerald: "#059669",
@@ -8321,6 +8420,17 @@ var HEADER_HEX = {
   rose: "#e11d48",
   slate: "#475569"
 };
+function resolveTableColor(value, fallback) {
+  const color = value?.trim();
+  if (!color) return fallback;
+  if (color in TABLE_HEADER_COLOR_PRESETS) {
+    return TABLE_HEADER_COLOR_PRESETS[color];
+  }
+  if (THEME_COLOR_TOKENS.has(color)) {
+    return `var(--${color})`;
+  }
+  return color;
+}
 var ROW_CONTEXT_HANDLED = "__ntableRowContextHandled";
 function EditableCell({ cell, onCellEdit }) {
   const columnDef = cell.column.columnDef;
@@ -8388,7 +8498,20 @@ function NTableContent({ effectiveMode }) {
   const noResultsText = useTableStore.use.noResultsText();
   const headerClassName = useTableStore.use.headerClassName();
   const headerColor = useTableStore.use.headerColor();
-  const colorStyle = headerColor ? HEADER_COLORS[headerColor] : null;
+  const headerTextColor = useTableStore.use.headerTextColor();
+  const tableBorderColor = useTableStore.use.borderColor();
+  const resolvedHeaderColor = resolveTableColor(headerColor, DEFAULT_TABLE_HEADER_COLOR);
+  const resolvedHeaderTextColor = resolveTableColor(headerTextColor, DEFAULT_TABLE_HEADER_TEXT_COLOR);
+  const resolvedBorderColor = resolveTableColor(tableBorderColor, DEFAULT_TABLE_BORDER_COLOR);
+  const headerCellStyle = {
+    backgroundColor: resolvedHeaderColor,
+    color: resolvedHeaderTextColor
+  };
+  const contentStyle = recipeStyle || tableBorderColor ? {
+    ...recipeStyle ?? {},
+    ...tableBorderColor ? { borderColor: resolvedBorderColor } : {}
+  } : void 0;
+  const rowBorderStyle = tableBorderColor ? { borderColor: resolvedBorderColor } : void 0;
   const onRowClick = useTableStore.use.onRowClick();
   const onRowContextMenu = useTableStore.use.onRowContextMenu();
   const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
@@ -8431,23 +8554,45 @@ function NTableContent({ effectiveMode }) {
         bordered === true ? surfaceBorderClasses(true) : "shadow-sm",
         classNames?.content
       ),
-      style: recipeStyle,
+      style: contentStyle,
       onContextMenu: handleBackgroundContextMenu,
       children: /* @__PURE__ */ jsxs(Table, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", colorStyle?.text, headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
-          showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12 text-center", colorStyle?.bg), children: /* @__PURE__ */ jsx(
-            Checkbox,
+        /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { style: rowBorderStyle, className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
+          showCheckbox && /* @__PURE__ */ jsx(
+            TableHead,
             {
-              "aria-label": "Select all rows",
-              checked: table.getIsAllPageRowsSelected(),
-              onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+              className: "w-10 text-foreground h-12 text-center",
+              style: headerCellStyle,
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": "Select all rows",
+                  checked: table.getIsAllPageRowsSelected(),
+                  onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+                }
+              )
             }
-          ) }),
-          hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: cn("w-10 text-foreground h-12", colorStyle?.bg) }),
-          hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { className: cn("text-foreground h-12", colorStyle?.bg), children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
-            flexRender(header.column.columnDef.header, header.getContext()),
-            header.column.getCanSort() && showSorting && /* @__PURE__ */ jsx("span", { children: getSortIcon(header.column) })
-          ] }) }, header.id))
+          ),
+          hasExpansion && /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              "aria-label": "Expand column",
+              className: "w-10 text-foreground h-12",
+              style: headerCellStyle
+            }
+          ),
+          hg.headers.map((header) => /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              className: "text-foreground h-12",
+              style: headerCellStyle,
+              children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getCanSort() && showSorting && /* @__PURE__ */ jsx("span", { children: getSortIcon(header.column) })
+              ] })
+            },
+            header.id
+          ))
         ] }, hg.id)) }),
         /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
           const isSelectedByRowId = Boolean(selectedRowId && row.original?.id === selectedRowId);
@@ -8467,7 +8612,8 @@ function NTableContent({ effectiveMode }) {
                   e.nativeEvent[ROW_CONTEXT_HANDLED] = true;
                   onRowContextMenu(e, row.original);
                 } : void 0,
-                className: cn(colorStyle?.row, classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-primary/5 hover:bg-primary/5", bordered === true && "border-border"),
+                style: rowBorderStyle,
+                className: cn(classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-primary/5 hover:bg-primary/5", bordered === true && "border-border"),
                 children: [
                   showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10 text-center", children: /* @__PURE__ */ jsx(
                     Checkbox,
@@ -8504,9 +8650,9 @@ function NTableContent({ effectiveMode }) {
                 ]
               }
             ),
-            isExpanded && renderSubRow && /* @__PURE__ */ jsx(TableRow, { "data-expanded-row": "true", className: "bg-muted/40 hover:bg-muted/40", children: /* @__PURE__ */ jsx(TableCell, { colSpan: totalCols, className: "p-0", children: renderSubRow(row.original) }) })
+            isExpanded && renderSubRow && /* @__PURE__ */ jsx(TableRow, { "data-expanded-row": "true", style: rowBorderStyle, className: "bg-muted/40 hover:bg-muted/40", children: /* @__PURE__ */ jsx(TableCell, { colSpan: totalCols, className: "p-0", children: renderSubRow(row.original) }) })
           ] }, row.id);
-        }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0), className: "h-16 text-center", children: noResultsText }) }) })
+        }) : /* @__PURE__ */ jsx(TableRow, { style: rowBorderStyle, children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0), className: "h-16 text-center", children: noResultsText }) }) })
       ] })
     }
   );
@@ -8979,11 +9125,13 @@ function TableAddButton() {
   const showAddButton = useTableStore.use.showAddButton();
   const addButtonText = useTableStore.use.addButtonText();
   const headerColor = useTableStore.use.headerColor();
+  const headerTextColor = useTableStore.use.headerTextColor();
   const bordered = useTableStore.use.bordered();
   if (!showAddButton) return null;
-  const accentHex = headerColor ? HEADER_HEX[headerColor] : void 0;
-  const btnStyle = accentHex ? { backgroundColor: accentHex } : void 0;
-  const baseCls = accentHex ? "hover:opacity-90" : "bg-primary hover:bg-primary/90";
+  const btnStyle = {
+    backgroundColor: resolveTableColor(headerColor, DEFAULT_TABLE_HEADER_COLOR),
+    color: resolveTableColor(headerTextColor, DEFAULT_TABLE_HEADER_TEXT_COLOR)
+  };
   const borderedCls = bordered ? "border border-muted-foreground" : "";
   return /* @__PURE__ */ jsx(
     "button",
@@ -8994,7 +9142,7 @@ function TableAddButton() {
       "aria-label": addButtonText || "Create",
       title: addButtonText || "Create",
       "data-bordered": bordered ? "true" : void 0,
-      className: `h-10 w-10 shrink-0 cursor-pointer flex items-center justify-center rounded-lg text-white transition-opacity ${baseCls} ${borderedCls}`,
+      className: `h-10 w-10 shrink-0 cursor-pointer flex items-center justify-center rounded-lg transition-opacity hover:opacity-90 ${borderedCls}`,
       children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" })
     }
   );
@@ -9263,6 +9411,8 @@ function TableLayout(props) {
   ] });
 }
 function NTable(props) {
+  const recipe = useNajmComponentStyle("table");
+  const recipeBordered = Boolean(recipe?.borderColor || recipe?.borderWidth);
   const availableModes = props.availableModes ?? ["table", "cards", "json"];
   const lastInvalidModeRef = useRef(void 0);
   let mode = props.mode;
@@ -9353,9 +9503,11 @@ function NTable(props) {
     CardComponent: props.renderCard ?? null,
     className: props.className ?? "",
     classNames: props.classNames ?? {},
-    bordered: props.bordered,
+    bordered: props.bordered ?? (recipeBordered ? true : void 0),
     headerClassName: props.headerClassName ?? "bg-card",
-    headerColor: props.headerColor ?? "primary",
+    headerColor: props.headerColor ?? recipe?.headerColor,
+    headerTextColor: props.headerTextColor ?? recipe?.headerTextColor,
+    borderColor: props.borderColor ?? recipe?.borderColor,
     showCheckbox: props.showCheckbox ?? true,
     selectedRowId: props.selectedRowId ?? null,
     headerSlot: props.headerSlot ?? null,

package/dist/json.mjs

@@ -298,6 +298,7 @@ function resolveRadiusValue(radius) {
 }
 
 // src/theme/config.ts
+var MODES = ["light", "dark"];
 var TOKEN_KEYS = [
   "background",
   "foreground",
@@ -336,6 +337,7 @@ var TOKEN_KEYS = [
   "radius"
 ];
 new Set(TOKEN_KEYS);
+new Set(MODES);
 
 // src/theme/design-config.ts
 new Set(NAJM_COMPONENT_NAMES);

package/dist/theme.css

@@ -47,6 +47,14 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-neutral: var(--neutral);
+  --color-neutral-foreground: var(--neutral-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
@@ -86,6 +94,42 @@
   100% { transform: translateX(200%); width: 40%; }
 }
 
+/* Typography variables emitted by NajmDesignProvider. */
+[data-najm-design-vars] {
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--font-size-base, 14px);
+  line-height: var(--line-height-base, 1.5);
+  letter-spacing: var(--letter-spacing-base, 0);
+  --text-xs: calc(var(--font-size-base, 14px) * 0.857142857 * var(--font-scale, 1));
+  --text-xs--line-height: var(--line-height-base, 1.5);
+  --text-sm: calc(var(--font-size-base, 14px) * var(--font-scale, 1));
+  --text-sm--line-height: var(--line-height-base, 1.5);
+  --text-base: calc(var(--font-size-base, 14px) * 1.142857143 * var(--font-scale, 1));
+  --text-base--line-height: var(--line-height-base, 1.5);
+  --text-lg: calc(var(--font-size-base, 14px) * 1.285714286 * var(--font-scale, 1));
+  --text-lg--line-height: var(--line-height-base, 1.5);
+  --text-xl: calc(var(--font-size-base, 14px) * 1.428571429 * var(--font-scale, 1));
+  --text-xl--line-height: var(--line-height-base, 1.5);
+}
+
+[data-najm-design-vars] :where(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  [data-slot="card-title"],
+  [data-slot="dialog-title"],
+  [data-slot="sheet-title"]
+) {
+  font-family: var(--font-heading, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
+}
+
+[data-najm-design-vars] :where(code, kbd, pre, samp) {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
 /* Default token values (oklch). Override globally via :root / .dark, or per
    subtree via <NajmThemeProvider>. */
 :root {
@@ -105,6 +149,14 @@
   --muted-foreground: oklch(0.5555 0 0);
   --accent: oklch(0.2747 0.006 286.001);
   --accent-foreground: oklch(0.9848 0 0);
+  --neutral: oklch(0.556 0 0);
+  --neutral-foreground: oklch(0.9848 0 0);
+  --info: oklch(0.6231 0.1679 254.149);
+  --info-foreground: oklch(0.9848 0 0);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.1445 0 0);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.1445 0 0);
   --destructive: oklch(0.6368 0.2078 25.326);
   --destructive-foreground: oklch(0.9848 0 0);
   --border: oklch(0.9219 0 0);
@@ -147,6 +199,14 @@
   --muted-foreground: oklch(0.6255 0.0171 285.896);
   --accent: oklch(0.2313 0.007 285.839);
   --accent-foreground: oklch(0.9683 0.0014 286.375);
+  --neutral: oklch(0.7155 0 0);
+  --neutral-foreground: oklch(0.1445 0 0);
+  --info: oklch(0.6231 0.1679 254.149);
+  --info-foreground: oklch(0.9683 0.0014 286.375);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.1445 0 0);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.1445 0 0);
   --destructive: oklch(0.6356 0.2082 25.378);
   --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.262 0.0085 285.799);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",