Class Name Resolvers

Class name resolvers compute dynamic class names from runtime context.

Use class name resolvers when static className strings are not enough.

Schema declaration

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  theme: {
    classNameResolver: "theme.resolveClassName",
    classNameWhen: [
      {
        slot: "tableRow",
        when: { key: "status", operator: "equals", value: "suspended" },
        className: "bg-red-50 text-red-950"
      }
    ]
  },
  registry: {
    classNameResolvers: ["theme.resolveClassName"]
  }
} as const;

Runtime registry

lib/vibeflui/registry.ts

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  classNameResolvers: {
    "theme.resolveClassName": ({ row, column }) => {
      if (column?.key === "status" && row?.status === "suspended") {
        return "font-medium text-red-700";
      }

      return "";
    }
  }
});

Static class names first

Prefer static class names when possible.

schemas/users/user-table.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: [
      { key: "email", label: "Email", cellClassName: "font-mono text-xs" }
    ]
  }
} as const;

Use a resolver only when the class depends on runtime data.

Class name conditions

Use classNameWhen for simple data-driven styles.

schemas/users/user-theme.ts

theme: {
  classNameWhen: [
    {
      slot: "tableRow",
      when: { key: "status", operator: "equals", value: "pending" },
      className: "bg-orange-50 text-orange-950"
    }
  ]
}